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>

試してみる »

画面の向きに応じて要素を表示する

以下のクラスは、デバイス（画面サイズ）に応じて要素を非表示にします。

要素を異なる向きで表示または非表示に設定できます。ノートパソコンなどのデスクトップデバイスは通常横向きですが、スマートフォンやタブレットは横向きまたは縦向きにできます。ユーザーがスマートフォンを持つ向きに応じて要素の表示と非表示を設定できます：

以下の例では、使用する向きに応じてテキストコンテンツを表示します。

タッチスクリーンデバイスの表示と非表示

デバイスがタッチをサポートしているかどうかに応じて、要素を表示または非表示にできます。

以下の例では、デバイスがタッチをサポートしているかどうかに応じてテキストコンテンツを表示します。