不同浏览器大小的不同 CSS

Question

我有一个关于 windowdependant CSS'es 的问题。这是一个非常常见的问题，但不知何故，它对我来说并不适用，对于 Wordpress。无论如何，目前我正在使用 Nettuts 建议的脚本。我只想在用户调整窗口大小时针对不同的 CSS 样式。我知道我需要为此使用 $(window).width 。我现在拥有的是：

function checkWindowSize() {

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

}

$(window).resize(checkWindowSize);

它确实可以胜任。但是..有一个小故障。当我调整窗口大小时，它确实针对另一种 css 样式。但是当我将窗口保持在小于 800 的大小时，按 F5（刷新），我需要在目标 css 发生之前手动调整窗口大小（1 px）。它不会自动定位它，只是当我稍微调整屏幕大小时。我玩弄了脚本的位置，比如将新的 CSS 放在实际的 CSS 之前，但效果并不好。

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

Answer 1

您可以为此使用 Adapt.js。 Adapt 根据宽度确定要加载的 CSS 文件，并将在 resize-event 或由平板电脑或手机倾斜触发的情况下切换 CSS 文件。

您也可以使用 Media Queries 和 polyfill 来支持旧版浏览器而不是 Adapt.js。

Answer 2

如上所述，媒体查询是一种方式。你已经看到过这样的 HTML：

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

W3C 引入了Mediaqueries 以进一步指定应在哪些媒体上使用样式表，这规避了浏览器嗅探的缺点，并使其在没有 javascript 的情况下也可以工作。

Answer 3

在窗口开始加载后调用它：

function checkWindowSize() {

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

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

Answer 4

当窗口调整大小时，您只会调用 checkWindowSize 方法。当您刷新页面时，不会发生大小调整，因此您永远不会检查大小并且永远不会添加类。

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

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

Answer 5

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

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