Question

我有一个关于windowdependant 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文件，具体取决于宽度，并将CSS文件切换为 resize-event 或由平板电脑或手机倾斜触发。

此外，您可以将媒体查询与 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的情况下也能正常工作。

针对不同浏览器大小的不同CSS

5 个答案: