使用jQuery检测屏幕大小并应用CSS样式

Question

我搜索并在web上找到了很多例子,甚至在stackoverflow中也没有,但是没有一个是100%解释的.对于那些想用CSS媒体屏幕回答的人,请不要这样做我知道的.但这个问题更适合IE7 +.因为它不支持"CSS媒体屏幕".

这是我发现的例子:

$(document).ready(function() {

if (screen.width>=800) {
    $("link[rel=stylesheet]:not(:first)").attr({href : "style1.css"});
    } else {
    $("link[rel=stylesheet]:not(:first)").attr({href : "style.css"});
    }
});

我是jquery的新手,所以如果我有4种不同的屏幕分辨率4种不同的样式,如何更改这个脚本.

所以我会骗取这样的事情:

1. 如果屏幕> 1 &&屏幕<600
2. 如果屏幕> 601 &&屏幕<1280
3. 如果屏幕> 1281 &&屏幕<1600
4. 如果屏幕> 1 1601

请帮我!

Answer 1

您不需要使用jQuery,而是使用CSS3 媒体查询:

@media only screen and (max-width : 600px) {
   /* Styles for 1*/
}

@media only screen and (min-width : 601px) and (max-width : 1280px) {
   /* Styles for 2 */
}

@media only screen and (min-width : 1281px) and (max-width : 1600px) {
   /* Styles for 3 */
}

@media only screen and (min-width : 1601px) {
   /* Styles for 4 */
}

好吧,正如@RaduChelariu提到的,为了支持像IE7这样的旧浏览器,您可以使用自定义插件来使CSS3媒体查询兼容.