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

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

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

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

来源

2013-01-14 Thomy800

您正在查找的是“CSS Media Queries”。

结帐本文的详细信息：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

来源

2013-01-14 21:26:07

注意，按照[此其他等问题（ http://stackoverflow.com/questions/7271818/media-query-like-behaviour-on-width-of-a-specific-div），你不能使用媒体查询来定位div的宽度，这更确切地说是什么提问者正在寻找。 –

Asker在这个特定问题中指定了窗口大小，这意味着媒体查询是相关的答案。 –

“如果容器的宽度低于指定的最小尺寸，将被隐藏。”是问题文本。媒体查询可以被使用，但是有必要找出窗口大小和容器之间的比例。我同意媒体查询是要走的路，只是比媒体查询稍微复杂一些 –

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

回答

相关问题