jQuery 窗口调整大小和谷歌浏览器答案

【问题标题】：jQuery window resize and Google ChromejQuery 窗口调整大小和谷歌浏览器
【发布时间】：2014-08-26 14:41:30
【问题描述】：

我无法解决我在调整菜单大小时遇到的问题。我要发布的代码仅适用于 Chrome。

由于很难用语言来解释，我给你看一些问题的截图。

这是我的菜单看着开头：

当我调整浏览器窗口的大小

当我调整它的大小 > 605 时，它应该看起来像第一张图片（它实际上适用于 i.e 和 firefox），但在 chrome 上它看起来像这样：

这是代码。

HTML：

<div id="containerMenu">

    <div id="menu">

        <ul>

            <a href="index.html"><li>HOME</li></a>
            <li>SERVIZI</li>
            <a href="wedding.html"><li>WEDDING</li></a>
            <a href="food.html"><li>FOOD</li></a>
            <a href="contatti.html"><li>CONTATTI</li></a>

        </ul>

    </div>

</div>

CSS（只有有用的东西）：

#containerMenu {width:100%;
    text-align:center;}

#menu {display:inline-block}

#menu li {float: left;}

jQuery:

$(window).resize(function() 
    {
    if($(window).innerWidth() <= 605) 
        { 
        $("li", $("#menu")).css("float","none")
        }

    else 
        {                   
        $("li", $("#menu")).css("float","left")
        }                   
    })

当然我有代码让它发生，即使窗口没有调整大小，但只打开宽度

你能帮我把这段代码与谷歌浏览器兼容吗？

谢谢你，斯特凡诺

【问题讨论】：

标签： jquery css google-chrome cross-browser css-float

【解决方案1】：

虽然您可以使用 jQuery 处理这种事情，但在 CSS 中添加 media query 会简单得多。类似于

/* Your normal css */
#containerMenu {
    width:100%;
    text-align:center;
}
#menu {
    display:inline-block
}
#menu li {
    float: left;
}

/* Media query */
@media (max-width: 605px) {
    #menu li {
        float: none;
    }
}

这将在所有浏览器上无缝运行。幕后发生的事情：您告诉浏览器您希望菜单的列表项为float: left。但在那之后，您将添加一个max-width 为605 像素的例外，即如果浏览器窗口为605 像素或更小，您实际上希望菜单的列表项为float: none。这就是我对你希望你的 JavaScript 做什么的理解。

媒体查询是Responsive Web Design 的基础之一。

【讨论】：