Foundation CSS 可见性-开发文档-JsSaaS开发平台

系统、网站、API站点，简单高效开发

Foundation 教程

Foundation5 教程 Foundation 起步 Foundation 文本 Foundation 表格 Foundation 按钮 Foundation 按钮组 Foundation 图标 Foundation 标签 Foundation 提醒框 Foundation 进度条 Foundation 面板 Foundation 图片 Foundation 下拉菜单 Foundation 折叠列表 Foundation 列表 Foundation 选项卡 Foundation 分页 Foundation 价格表 Foundation 顶部导航栏 Foundation 侧边栏 Foundation 滑动导航(Off-Canvas) Foundation 麦哲伦（Magellan）导航 Foundation 表单 Foundation 输入框尺寸 Foundation 开关 Foundation 滑块 Foundation 提示框 Foundation 模态框 Foundation Joyride Foundation 均衡器(Equalizer)

Foundation 网格

Foundation 网格系统 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格 - 大型设备 Foundation 块状网格 Foundation 网格实例

Foundation 参考手册

Foundation 图标参考手册 Foundation CSS 参考手册 Foundation CSS 可见性

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>

根据屏幕尺寸隐藏元素

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

类	描述
.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">你不在小型设备上。</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>

根据屏幕方向显示元素

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

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

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

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

实例

文本只在横向显示。
文本只在纵向显示。

触屏设备的显示与隐藏

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

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

下面实例根据设备是否支持触摸来显示文本内容：

实例

你的设备支持触屏。
你的设备不支持触屏。