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>

根据屏幕尺寸隐藏元素以下类会根据设备(屏幕尺寸)来隐藏元素。 类 描述 .hide-for-small-only 只在小型设备上隐藏元素 (屏幕宽度小于 40.0625em ) .hide-for-medium-up 在中型及以上设备上隐藏元素 (屏幕宽度大于 40.0625em) .hide-for-medium-only 只在中型设备上隐藏元素 (屏幕宽度在 40.0625em 到 64.0625em 之间) .hide-for-large-up 在大型及以上设备上隐藏元素 (屏幕宽度大于 64.0625em) .hide-for-large-only 只在大型设备上隐藏元素 (屏幕宽度在 64.0625em 到 90.0625em 之间) .hide-for-xlarge-up 在更大型及以上设备上隐藏元素 (屏幕宽度大于 90.0625em) .hide-for-xlarge-only 只在更大型及以上设备上隐藏元素 (屏幕宽度在 90.0625em 到 120.0625em之间) .hide-for-xxlarge-up 在超大型及以上设备上隐藏元素 (屏幕宽度大于 120.0625em) p class="hide-for-small-only"你不在小型设备上。/pp class="hide-for-medium-up"你不在中型、大型、更大型、超大型的设备上。/pp class="hide-for-medium-only"你不在中型设备上。/pp class="hide-for-large-up"你不在大型、更大型、超大型的设备上。/pp class="hide-for-large-only"你不在大型设备上。/pp class="hide-for-xlarge-up"你不在更大型、超大型的设备上。/pp class="hide-for-xlarge-only"你不在更大型设备上。/pp class="hide-for-xxlarge-up"你不在超大型设备上。/p

根据屏幕方向显示元素

以下类会根据设备(屏幕尺寸)来隐藏元素。

我们可以设置元素在不同方向是是否显示或隐藏。笔记本等桌面设备一般是横向的，但是手机和平板设备可以是横向或纵向，我们可以根据用户手机拿的方向来设置元素隐藏与显示：

下面实例根据使用的方向显示文本内容：