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 完成的，我很想知道如何。

说明这一点的图形在这里。

score 2 · Accepted Answer

2

他们使用 css @media 查询以不同的分辨率显示和隐藏不同的元素。

于 2013-01-02T21:57:52.613 回答

score 0 · Accepted Answer

Mashable.com 使用 Skeleton，这是一个非常好的响应式网站设计框架。它具有明确定义的@media 查询，可以根据视口大小隐藏或显示 div。

2 回答 2