Question

我搜索并在网上找到了很多例子，甚至在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种不同的样式，如何更改此脚本。

所以我会说谎有这样的事情：

如果屏幕＆gt; 1＆amp;＆amp;屏幕＆lt; 600
如果屏幕＆gt; 601＆amp;＆amp;屏幕＆lt; 1280
如果屏幕＆gt; 1281＆amp;＆amp;屏幕＆lt; 1600
如果屏幕＆gt; 1 1601

请帮助我！

Answer 1

您不需要使用jQuery，而是使用CSS3 media queries：

@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这样的旧浏览器，您可以使用自定义plugin来使CSS3媒体查询兼容。

Answer 2

实际上，媒体查询就是答案。只需使用this shiv为IE7和8添加媒体查询支持，您就可以了。不需要凌乱的javascript。

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

2 个答案: