标签: browser-width

我正在创建一个网站,我的所有产品图片将根据浏览器窗口大小重新调整大小,所以我写了一些媒体查询,我使用一个大图像,并在不同的窗口大小重新调整大小但我有一个图像,我用于背景,我怎么能重新调整大小呢？我想在IE7和8中的所有浏览器中支持它.

HTML

<div></div>

CSS

div{ 
background: url("http://canadianneighborpharmacy.net/images/cnp/discount_20.png") 
no-repeat scroll 0 0 transparent;
position:absolute;
width:45px; 
height: 45px; }

我的实时代码在这里: - http://jsfiddle.net/jamna/DdxbQ/19/这里我有一个主要的"产品图片",现在根据浏览器窗口大小调整大小(在我的小提琴我没有写代码为调整产品图像的大小,我只显示我想要调整大小的图像)但是我有另一个"存钱币标签"图像,它是在"跨度"的背景中我想与产品图像同时重新调整尺寸.

首先是有一个吗？或者我必须使用JavaScript？我希望能够更改使用哪个CSS,因此frex我可以为移动设备加载较小的字体,或者其他什么.

我有这个jquery代码很好用:

$(document).scroll(function(){
    if ($(this).scrollTop()>175){
        // animate fixed div to small size:
        $('header').stop().animate({ height: 90 },100);
    } else {
        //  animate fixed div to original size
        $('header').stop().animate({ height: 175 },100);
    }
});

我需要以上所有浏览器/设备随时出现并阅读,但我还需要调整较小标题的高度(当前为90px - 在行下方//将固定div设置为小尺寸:)仅适用于浏览器宽度介于641px和959px之间.对于那些浏览器宽度,我需要标题的高度为120px,否则使用上面的代码.

有点像媒体查询,我希望它在浏览器调整大小时自动更新.

我该怎么做？