2

我在网上搜索并找到了许多示例，甚至在 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

请帮我！

4

2 回答 2

5

您不需要 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 */
}

好的，正如@RaduCelariu 提到的，要支持像 IE7 这样的旧浏览器，您可以使用自定义插件来使 CSS3 媒体查询兼容。

于 2013-04-07T11:40:34.133 回答
1

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

于 2013-04-07T11:47:23.713 回答