Foundation CSS 可见性


根据屏幕尺寸显示元素

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

描述
.show-for-small-only 只在小型设备上显示元素 (屏幕宽度小于 40.0625em )
.show-for-medium-up 在中型及以上设备上显示元素 (屏幕宽度大于 40.0625em)
.show-for-medium-only 只在中型设备上显示元素 (屏幕宽度在 40.0625em 到 64.0625em 之间)
.show-for-large-up 在大型及以上设备上显示元素 (屏幕宽度大于 64.0625em)
.show-for-large-only 只在大型设备上显示元素 (屏幕宽度在 64.0625em 到 90.0625em 之间)
.show-for-xlarge-up 在更大型及以上设备上显示元素 (屏幕宽度大于 90.0625em)
.show-for-xlarge-only 只在更大型及以上设备上显示元素 (屏幕宽度在 90.0625em 到 120.0625em之间)
.show-for-xxlarge-up 在超大型及以上设备上显示元素 (屏幕宽度大于 120.0625em)

以下实例演示了以上所有 .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>