隐藏元素，如果太小没有js

Question

如果窗口大小低于最小大小，我喜欢隐藏内容。我找到了一个例子（http://css-tricks.com/dynamic-page-replacing-content/），但我找不到，为什么会有效。

<div class="container">
    <div class="box left">foo1</div>
    <aside class="box right">foo2</aside>
</div>

目标是，如果容器的宽度低于指定的最小尺寸，则将隐藏。这应该没有javascript，只需使用CSS。

Answer 1

您正在寻找的是“CSS媒体查询”。

查看此文章以获取更多信息：http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

这个例子只用CSS来完成你想要的东西：

@media only screen and (max-device-width: 480px) {
  aside { 
    display:none;
  }
}

You might also check out twitter bootstrap to see how this is used to make responsive grid systems and classes that hide elements in specific contexts