Foundation 基础Foundation 教程Foundation 安装Foundation 按钮Foundation 按钮组Foundation 标签Foundation 表单Foundation 表格Foundation 侧边栏Foundation 顶部导航栏Foundation 分页Foundation 滑动导航Foundation 滑块Foundation 价格表Foundation 进度条Foundation 均衡器(Equalizer)Foundation 开关Foundation 列表Foundation 麦哲伦（Magellan）导航Foundation JoyrideFoundation 面板Foundation 模态框Foundation 输入框 尺寸Foundation 提示框Foundation 提醒框Foundation 图标Foundation 图片Foundation 文本Foundation 下拉菜单Foundation 选项卡Foundation 折叠列表Foundation 手册Foundation CSS 参考手册Foundation CSS 可见性Foundation 图标参考手册Foundation 网格Foundation 块状网格Foundation 网格 - 大型设备Foundation 网格 - 水平堆叠Foundation 网格 - 小型设备Foundation 网格 - 中型设备Foundation 网格实例Foundation 网格系统
©
本文档使用
php.cn手册 发布
文字
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 | 在纵向时显示元素（横向隐藏） |
下面实例根据使用的方向显示文本内容：
实例
<p class="show-for-landscape">文本只在横向显示。</p> <p class="show-for-portrait">文本只在纵向显示。</p>
实例预览 »
触屏设备的显示与隐藏
你可以根据设备是否支持触摸来显示与隐藏元素。
| 类 | 描述 |
|---|---|
| .show-for-touch | 在支持触屏的设备上显示(不支持的设备上隐藏) |
| .hide-for-touch | 在支持触屏的设备上隐藏(不支持的设备上显示) |
下面实例根据设备是否支持触摸来显示文本内容：
实例
<p class="show-for-touch">你的设备支持触屏。</p> <p class="hide-for-touch">你的设备不支持触屏。</p>实例预览 »
关于我们 联系我们 留言板
手册网