不同浏览器尺寸需使用不同的CSS

Question

我有一个关于依赖于窗口的CSS的问题。这是一个非常常见的问题，但在Wordpress上有些原因使它对我不起作用。目前，我正在使用Nettuts建议的脚本。我想要在用户调整窗口大小时针对不同的CSS样式进行定位。我知道我需要使用$(window).width来实现这一点。现在我所拥有的是：

function checkWindowSize() {

    if ( $(window).width() < 800 ) {
        $('body').addClass('small');
    }
    else {
        $('body').removeClass('small');
    }

}

$(window).resize(checkWindowSize);

它确实完成了任务。但是...有一个小故障。当我调整窗口大小时，它会定位到另一个CSS样式。但是，当我将窗口留在比800小的尺寸，并按F5（刷新）时，需要手动调整窗口大小（1像素），然后才能应用目标CSS。它不会自动定位，只有当我稍微调整屏幕大小时才会出现。我尝试过更改脚本的位置，例如将新的CSS放在实际CSS之前，但效果并不好。

有什么想法吗？如果我表述不够清楚，请告诉我 :)

- Don Munter

Answer 1

您是否考虑过使用媒体查询？

http://www.alistapart.com/articles/responsive-web-design/

- hamishtaplin

---

是的，我有。但IE不支持那个。而且我的客户比较老派 :p - Don Munter

@DonMunter IE9+支持它们。而且你可以为旧版IE浏览器提供polyfill：https://github.com/scottjehl/Respond - Brent

Answer 2

你可以使用Adapt.js来实现此功能。Adapt会根据宽度确定要加载的CSS文件，并在调整大小事件或平板电脑或手机倾斜触发时切换CSS文件。

此外，您也可以使用媒体查询和polyfill来支持旧浏览器，而不是使用Adapt.js。

- Simon Stamm

Answer 3

只需在窗口加载时调用一次即可：

function checkWindowSize() {

    if ( $(window).width() < 800 ) {
        $('body').addClass('small');
    }
    else {
        $('body').removeClass('small');
    }

}
$(window).load(checkWindowSize);
$(window).resize(checkWindowSize);

- Kevin Pei

---

谢谢你的赞美。 - Kevin Pei

Answer 4

你只在窗口大小改变时调用了checkWindowSize方法。当你刷新页面时，没有发生任何大小的改变，因此你永远不会检查大小并且永远不会添加类。

所以你还需要在页面加载时调用checkWindowSize。除了你已经有的代码之外，添加这个：

$(function() { checkWindowSize(); });

- Joe White

Answer 5

如上所述，媒体查询是前进的方式。您可能已经看到过类似这样的HTML代码：

<link href='style.css' type='text/css' rel='stylesheet' media='screen'>

W3C引入了 媒体查询来进一步指定应该使用样式表的媒体，这避免了浏览器嗅探的不利影响，使其无需JavaScript也能正常工作。

- bigblind

---

我确实在移动网站中使用它。但是根据css-tricks的示例（http://css-tricks.com/examples/ResolutionDependantLayout/example-one.php），它在IE中不起作用。 - Don Munter

那是真的，旧版浏览器只会忽略它们。 - bigblind