css - 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以不同的分辨率显示和隐藏不同的元素。