Foundation CSS 可見性

根據(jù)屏幕尺寸顯示元素

以下類會根據(jù)設(shè)備(屏幕尺寸)來顯示元素。

以下實例演示了以上所有 .show- 類的可見性。

<p class="show-for-small-only">你在小型設(shè)備上。</p>
<p class="show-for-medium-up">你在中型、大型、更大型、超大型的設(shè)備上。</p>
<p class="show-for-medium-only">你在中型設(shè)備上。</p>
<p class="show-for-large-up">你在大型、更大型、超大型的設(shè)備上</p>
<p class="show-for-large-only">你在大型設(shè)備上。</p>
<p class="show-for-xlarge-up">你在更大型、超大型的設(shè)備上。</p>
<p class="show-for-xlarge-only">你在更大型設(shè)備上。</p>
<p class="show-for-xxlarge-up">你在超大型設(shè)備上。</p>

嘗試一下 ?

根據(jù)屏幕尺寸隱藏元素

以下類會根據(jù)設(shè)備(屏幕尺寸)來隱藏元素。

<p class="hide-for-small-only">你不在小型設(shè)備上。</p>
<p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的設(shè)備上。</p>
<p class="hide-for-medium-only">你不在中型設(shè)備上。</p>
<p class="hide-for-large-up">你不在大型、更大型、超大型的設(shè)備上。</p>
<p class="hide-for-large-only">你不在大型設(shè)備上。</p>
<p class="hide-for-xlarge-up">你不在更大型、超大型的設(shè)備上。</p>
<p class="hide-for-xlarge-only">你不在更大型設(shè)備上。</p>
<p class="hide-for-xxlarge-up">你不在超大型設(shè)備上。</p>

嘗試一下 ?

根據(jù)屏幕方向顯示元素

以下類會根據(jù)設(shè)備(屏幕尺寸)來隱藏元素。

我們可以設(shè)置元素在不同方向是是否顯示或隱藏。筆記本等桌面設(shè)備一般是橫向的，但是手機和平板設(shè)備可以是橫向或縱向，我們可以根據(jù)用戶手機拿的方向來設(shè)置元素隱藏與顯示：

下面實例根據(jù)使用的方向顯示文本內(nèi)容：

觸屏設(shè)備的顯示與隱藏

你可以根據(jù)設(shè)備是否支持觸摸來顯示與隱藏元素。

下面實例根據(jù)設(shè)備是否支持觸摸來顯示文本內(nèi)容：