不同浏览器尺寸的不同CSS

Question

我有一个关于 windowdependent 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（刷新），我需要在目标 css 发生之前手动调整窗口大小（1 px）。当我稍微调整屏幕大小时，它不会自动定位它。我调整了脚本的位置，比如将新的 CSS 放在实际的 CSS 之前，但这效果不太好。

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

Answer 1

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

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

Answer 2

您可以使用 Adapt.js 来实现此目的。 Adapt 根据宽度确定加载哪个 CSS 文件，并在 resize-event 或由平板电脑或手机倾斜触发时切换 CSS 文件。

您还可以将媒体查询与polyfill结合使用用于旧版浏览器支持而不是 Adapt.js。

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

如上所述，媒体查询是最佳选择。您可能见过这样的 HTML：

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

W3C 引入了 Mediaqueries 来进一步指定媒体应该使用哪些样式表，这避免了浏览器嗅探的缺点，并且使其无需 JavaScript 也能工作。