jQuery窗口调整大小和Google Chrome

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

作为一个难以用言语解释的情况，我会告诉你一些问题的截图。

这是我的菜单看起来在开幕：

enter image description here

当我调整浏览器的窗口< = 605px，jQuery的代码中删除悬空，所以项目被放入柱和中心。（对不起，我不能发布超过2个链接）

当我调整它> 605它应该看起来像在第一个图像（它实际上在ie和firefox上），但在铬上它看起来像这样：

enter image description here

下面的代码。

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（）事件。

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

谢谢斯特凡诺

来源

2014-07-05 Nefastus

虽然你可以处理这种与jQuery的事情，这将是更简单得多的media query添加到您的CSS。类似于

/* 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的基础之一。

来源

2014-07-05 16:34:40 Ceili

jQuery窗口调整大小和Google Chrome

回答

相关问题