（转）CSS 为不同大小的浏览器视窗使用不同的样式表

时间：2024-01-02 15:41:08

转自：http://www.iefans.net/liulanqi-shichuang-butong-yangshibiao/

同一个网站，访问它的浏览器可能会是不同的宽度，常见的有320px，480px，800px，1024px，1280px，1920px等，为不同大小的浏览器视窗提供不同的访问效果，提高用户的使用体验，同时网站本身也可以为不同受众提供不同的资源。
下面提供两种不同的浏览器视窗解决方案，这两个方法都同样适用于IE浏览器与其他非IE内核浏览器。

（转）CSS 为不同大小的浏览器视窗使用不同的样式表

一、通过W3C standard来定义，例如：

view sourceprint?
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
上面的代码表示：当访问网站的设备浏览器宽度大于等于800px时，将使用800.css这个样式。

又如：

view sourceprint?
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
上面的代码表示：当访问网站的设备浏览器宽度在701px和900px之间时，将使用medium.css这个样式。

目前Mozilla， Opera和WebKit等浏览器的当前版本都支持这个标准，不幸的是IE浏览器并不支持此标准，包括IE8，以及IE9 Previous。

不要着急，方案二将解决此问题。

二、通过JQuery来动态调整页面样式
1、首先定义两个link，当然你也可以是一个，第二个是要更改的css

view sourceprint?
<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

2、下面的JavaScript代码将根据不同的浏览器大小，更改css

view sourceprint?

unction adjustStyle(width) { 

    width = parseInt(width); 

    if (width < 701) { 

        $("#size-stylesheet").attr("href", "css/narrow.css"); 

    } else if ((width >= 701) && (width < 900)) { 

        $("#size-stylesheet").attr("href", "css/medium.css"); 

    } else { 

       $("#size-stylesheet").attr("href", "css/wide.css"); 

    } 

} 

$(function() { 

    adjustStyle($(this).width()); 

    $(window).resize(function() { 

        adjustStyle($(this).width()); 

    }); 

});

查看例子：

例子1 例子2 例子3 下载所有例子
英文原址：http://css-tricks.com/resolution-specific-stylesheets/

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
文章引用地址：http://www.iefans.net/liulanqi-shichuang-butong-yangshibiao/ 作者：iefans

相关文章