jquery - 使用 jQuery 检测屏幕尺寸并应用 CSS 样式

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 种不同的屏幕分辨率，那么如何更改此脚本。

所以我希望有这样的东西:

1. 如果屏幕 > 1 && 屏幕 < 600
2. 如果屏幕 > 601 && 屏幕 < 1280
3. 如果屏幕 > 1281 && 屏幕 < 1600
4. 如果屏幕 > 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 媒体查询兼容。