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

回答

相關問題