Foundation CSS 可見性

根據屏幕尺寸顯示元素

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

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

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

嘗試一下 ?

根據屏幕尺寸隱藏元素

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

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

嘗試一下 ?

根據屏幕方向顯示元素

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

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

下面實例根據使用的方向顯示文本內容：

觸屏設備的顯示與隱藏

你可以根據設備是否支持觸摸來顯示與隱藏元素。

下面實例根據設備是否支持觸摸來顯示文本內容：