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

Question

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

通过单词解释是一个困难的情况，我将向您展示一些问题的截图。

这是我的菜单看到的开头：

当我调整浏览器窗口＆lt; = 605px的大小时，jQuery代码会移除左侧浮动，因此项目将放在列中并居中。 （对不起，我不能发布2个以上的链接）

当我调整大小时＆gt; 605它应该看起来像在第一个图像（它实际上在ie和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")
        }                   
    })

当然我的代码是让它发生，即使窗口没有调整大小，但只打开宽度<= 605，但它与上面的那个完全相同，只是没有.resize（）事件

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

谢谢你， 斯特凡诺

Answer 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为605px的异常，即如果浏览器窗口为605px或更低，您实际上希望菜单的列表项为float: none。这就是我对你希望JavaScript做什么的理解。

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