Question

我遇到了这个问题，我正在处理媒体查询

@media screen and (min-width: 527px) and (max-width: 599px) {
    body {background-color:green}
}

@media only screen and (max-width: 526px) {
    body {background-color:red}
        }

如果我理解正确，526px以下的任何内容都会显示红色我也有这个jquery显示浏览器宽度：

 <script>
        $(window).resize(function () {

            $(window).height();
            $(window).width(); 
            $(".width-value2").text($(window).width());
        });
    </script>

在页面的头部：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但是当宽度根据jquery达到510px时，它会变为绿色，在它应该到之前为17px。

jquery是否显示错误的宽度，如果是，我如何显示正确的宽度。

任何帮助都将不胜感激。

Answer 1

这是因为滚动条（17像素）。

注意，在Chrome浏览器中有一个滚动条宽度，另一个是另一个等等...

使用mqGenie工具修复此问题。此外，它消除了不同浏览器中的滚动条差异（阅读说明）。 Demo

或者，如果你不想让mqGenie找到相同的东西。现在你知道问题的原因是什么了。

Css Media Queries布局在错误的宽度上中断

1 个答案: