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，这是一个非常好的负责网站设计框架。它具有良好定义的@media查询，可根据视口大小隐藏或显示div。