Question

抱歉，如果描述太长，我只是想尽可能多地提供信息最近我有一个问题（我修复了它，但我不明白它为什么会发生）问题是，当您调整浏览器大小时，例如宽度为768px时，媒体查询无法正常工作。为了工作，我不得不将浏览器宽度减少大约20-30px。

很快，当宽度小于750像素时，768px媒体查询正在运行。 这是简化的代码 HTML：

<div id="wrapper">
    <header id="header">
        <a href="" class="logo">
        <img src="images/logo-wide.png" alt="logo" />
        </a>
        <a id="menu_button" href="#">menu</a>
        <nav id="nav">
            <ul id="menu">
                <li><a href="" class="home">Home</a></li>
                <li><a href="" class="services">Services</a>
                ... more navidation list items
            </ul>
        </nav>
    </header>
    ... more code which is not relevant
</div>

CSS：

@media screen and (max-width: 768px) 
{
    div#wrapper
    {
        max-width:768px;
        margin:0 auto;
    }
    a.logo
    {
        display:block;
        float:left;
        width:80%;
        padding:25px 0;
        height:33px;
    }
    a#menu_button
    {
        width:20%;
        float:left;
        display:block;
        padding:50px 0 15px;
        height:18px;
    }
    /* menu
    ----------------------*/
    nav,
    #nav
    {
        width:100%;
        float:left;
        display:none;
    }
    ul#menu ul
    {
        display:none;
    }
    ul.sub.active
    {
        display:block !important;
    }
    ul#menu li
    {
        float:none;
    }
    ul#menu a
    {
        width:100%;
        padding:20px 0;
        text-align:left;
        text-indent: 70px;
        display:block;
        margin-top: 1px;
    }
}

@media screen and (min-width: 769px) 
{
    div#wrapper
    {
        max-width:960px;
        margin:5px auto;
    }
    a.logo
    {
        display:block;
        float:left;
        padding:20px 35px;
    }
    a#menu_button
    {
        display:none;
    }
    /* menu
    ----------------------*/
    nav,
    #nav
    {
        float:right;
        display:block;
    }
    .activemobile
    {
        display:block !important;
    }
    ul#menu li
    {
        float:left;
    }
    ul#menu a
    {
        width:90px;
        padding:50px 0 5px;
        display:block;
        margin: 0 0 0 2px;
    }
    ul#menu ul
    {
        display:none;
        position:absolute;
        margin-left:2px;
        right:0;
    }
    ul#menu li:hover ul
    {
        display:block;
        z-index:999;
    }
    ul#menu ul li
    {
        float:left;
    }
    ul#menu ul li a
    {
        width:80px;
        padding:5px;
        font-size:12px;
        margin:2px 0 0 2px;
    }
    ...
}

无效的代码：

ww = document.body.clientWidth;// i take this on window resize and on load
var adjustMenu = function() {
    if (ww < 768) {
        if (!$("#nav").hasClass("active")) {
            $("#nav").hide();
        } else {
            $("#nav").show();
        }
    ...

正在运行的代码（我使用modernizr）

var adjustMenu = function() {
    if (Modernizr.mq('(max-width: 768px)')) {
        if ($("#nav").hasClass("active"))
            $("#nav").show();
        else
            $("#nav").hide();
...

有人能告诉我为什么媒体查询没有大约20-30px的差距吗？

Answer 1

.clientWidth返回元素的内部宽度，即不包括边框，边距或垂直滚动条宽度

https://developer.mozilla.org/en-US/docs/DOM/element.clientWidth

媒体查询中的[min | max] -width媒体功能返回渲染表面或窗口的宽度

https://developer.mozilla.org/en/docs/CSS/Media_queries#width

这就是你得到差异的地方。

您可以使用window.innerWidth代替;它包括滚动条宽度。

https://developer.mozilla.org/en-US/docs/DOM/window.innerWidth

对于处理所有浏览器怪癖的难以置信的彻底解决方案，请参阅https://github.com/tysonmatanich/viewportSize

响应式设计，媒体查询宽度与实际宽度之间的差异

1 个答案: