隐藏元素,如果太小没有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媒体查询".

这个例子只用CSS就可以完成你想要的东西:

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

"如果容器的宽度低于指定的最小尺寸,则将被隐藏." 是问题文本.可以使用媒体查询,但有必要确定窗口大小和容器之间的比率.我同意媒体查询是要走的路,只是它比媒体查询稍微复杂一点 (3认同)