Mashable.com如何通過Css顯示/隱藏元素？

Question

我想知道mashable.com如何隱藏它的菜單按鈕 - 它出現在右上角 - 當頁面高於一定寬度時消失，當頁面低於一定寬度時消失。具體的CSS規則：

html.no-touch .main-menu li.menu 
{ 
    display: none; 
} 

優先顯示的圖標規則：

.navbar .nav > li 
{ 
    display:block; 
    float: left; 
} 

，但我看不出它是如何做它，因爲禁用JavaScript的出現造成任何不良影響，並沒有適用於父元素的Css類似乎發生了變化。看來：

html.no-touch .main-menu li.menu 
{ 
    display: none; 
} 

應始終優先，但顯然沒有，不知何故，這似乎已經完全用CSS來實現，我很好奇，想知道怎麼辦。

說明這一點的圖形是here。

Answer 1

他們使用css @media queries以不同的分辨率顯示和隱藏不同的元素。

Answer 2

Mashable.com使用Skeleton這是一個非常好的resposive網站設計框架。它具有定義良好的@media查詢來根據視口大小隱藏或顯示div。