Foundation CSS 可见性 - 学习 Foundation 5

Foundation 内置了一些 CSS class 用来根据屏幕尺寸和方向显示或隐藏元素

根据屏幕尺寸显示元素

下面的 CSS class 会根据屏幕尺寸来显示元素

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">你在屏幕宽度小于 40.0625em 的小型设备上</p>
<p class="show-for-medium-up">你在屏幕宽度大于 40.0625em 的设备上</p>
<p class="show-for-medium-only">你在屏幕宽度在 40.0625em 到 64.0625em 的设备上</p>
<p class="show-for-large-up">你在屏幕宽度大于 64.0625em 的设备上</p>
<p class="show-for-large-only">你在屏幕宽度在 64.0625em 到 90.0625em的 大型设备上</p>
<p class="show-for-xlarge-up">你在屏幕宽度大于 90.0625em 的设备上</p>
<p class="show-for-xlarge-only">你在屏幕宽度在 90.0625em 到 120.0625em 的大型设备上</p>
<p class="show-for-xxlarge-up">你在屏幕宽度大于 120.0625em 的超大型设备上</p>

运行范例 »

根据屏幕尺寸隐藏元素

下面的 CSS class 会根据设备屏幕尺寸来隐藏元素

CSS 类	描述
.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 时隐藏

下面的代码演示了以上所有 .hide- 类的可见性

<p class="hide-for-small-only">你不在屏幕宽度小于 40.0625em 的小型设备上</p>
<p class="hide-for-medium-up">你不在屏幕宽度大于 40.0625em 的设备上</p>
<p class="hide-for-medium-only">你不在屏幕宽度在 40.0625em 到 64.0625em 的设备上</p>
<p class="hide-for-large-up">你不在屏幕宽度大于 64.0625em 的设备上</p>
<p class="hide-for-large-only">你不在屏幕宽度在 64.0625em 到 90.0625em的 大型设备上</p>
<p class="hide-for-xlarge-up">你不在屏幕宽度大于 90.0625em 的设备上</p>
<p class="hide-for-xlarge-only">你不在屏幕宽度在 90.0625em 到 120.0625em 的大型设备上</p>
<p class="hide-for-xxlarge-up">你不在屏幕宽度大于 120.0625em 的超大型设备上</p>

运行范例 »

根据屏幕方向显示元素

下面的的 CSS class 会根据设备屏幕方向来隐藏元素

我们可以设置元素在不同方向是是否显示或隐藏

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

CSS 类	描述
.show-for-landscape	在横向时显示元素，纵向隐藏
.show-for-portrait	在纵向时显示元素，横向隐藏

下面的代码会根据使用的方向显示文本内容

<p class="show-for-landscape">文本只在横向显示</p>
<p class="show-for-portrait">文本只在纵向显示</p>

运行范例 »

触屏设备的显示与隐藏

可以根据设备是否支持触摸来显示与隐藏元素

CSS 类	描述
.show-for-touch	在支持触屏的设备上显示，不支持的设备上隐藏
.hide-for-touch	在支持触屏的设备上隐藏，不支持的设备上显示

下面的代码会根据设备是否支持触摸来显示文本内容

<p class="show-for-touch">你的设备支持触屏</p>
<p class="hide-for-touch">你的设备不支持触屏</p>

运行范例 »