隱藏元素如果太小而沒有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

回答

相關問題