2

在我的 CSS 中，我有一个媒体查询，如下所示：

@media (min-width: 800px) { /* styles */ }

然后在我的 jQuery 中，我以窗口宽度为目标并执行一些操作。

编辑：根据下面的答案，我已经改变了这个功能，但我的 JS 和 CSS 仍然没有对齐。通过使用已接受答案中指定的 Modernizr 函数解决了该问题。

$(window).resize(function() {
    var viewportWidth = $(window).width();
    if (viewportWidth >= 800) {
        // do something
    }
});

问题是，当 jQuery 在 800 像素或更多像素上执行时，CSS 会在 740 像素处启动。

这些不对齐是否存在已知问题？或者我的页面上可能有什么东西影响了 CSS，为什么它是 740 像素而不是 800 像素？也许我应该使用其他东西来代替$(window)？

编辑：我已经在 Safari 中进行了测试，它运行良好。在 Chrome 和 Firefox 中，jQuery 函数在 800px 上运行，CSS 也是如此。但是在 Chrome 中，CSS实际上在 740px 之后运行，即使媒体查询是 800px - 我怎样才能让这些完美对齐？

4

5 回答 5

3

您可以使用Modernizr在 JS中执行媒体查询mq()（该方法将返回一个布尔值）：

$(window).resize(function() {
    if (Modernizr.mq('(min-width: 800px)')) {
        // do something
    }
});
于 2012-08-16T20:39:55.200 回答
2

移动您的宽度检查，否则viewportWidth变量将始终是相同的：

$(window).resize(function() {
    var viewportWidth = $(this).width();
    if (viewportWidth >= 800) {
        // do something
    }
});
于 2012-08-16T20:39:42.493 回答
2

有效的代码是：

$(window).resize(function() {

    var viewportWidth = $(window).width();

    if (viewportWidth >= 800) {
        // do something
    }
});

每次窗口调整大小时，新值都将存储在viewportWidth变量中。在您的代码中获取页面加载时viewportWidth的唯一值。$(window).width()

于 2012-08-16T20:43:39.990 回答
1

我刚刚尝试过并且似乎可行的方法是使用 CSS 媒体查询来设置对象的样式，然后使用 javascript 测试对象是否具有该样式。Javascript 询问 CSS 答案是什么，而不是让页面的两个部分分别确定它：

CSS：

@media (min-width: 800px) {  
    #viewType {width:3px;}
}

HTML：

<div id="viewType" style="display:none"></div>

JavaScript：

var answer = ($("#viewType").width()==3)
于 2013-06-12T20:35:07.780 回答
1

我同意史蒂夫的回答。jquery(window).width(); is 与媒体查询不匹配，甚至不提供准确的窗口宽度大小。这是我从史蒂夫那里得到并修改的答案。

CSS :
        @media (max-width: 767px) {

           //define your class value, anything make sure it won't affect your layout styling
           .open {
            min-width: 1px !important;
           }
        } 

        .open {
              min-width: 2px;
        }

JS：

// when re-sizing the browser it will keep looking for the min-width size, if the media query is invoked the min-width size will be change.

$(window).on('resize orientation', function() {

    var media = $('.open').css('min-width');

    if( media == '1px') // means < 767px 
    {       
        // do your stuff
    }

});

就是这样~希望对你有帮助。

于 2014-01-14T05:35:10.027 回答