Foundation5(四十)
来源:互联网 发布:海岛奇兵能量神像数据 编辑:程序博客网 时间:2024/04/30 02:23
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>
尝试一下 »
根据屏幕尺寸隐藏元素
以下类会根据设备(屏幕尺寸)来隐藏元素。
<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>
尝试一下 »
根据屏幕方向显示元素
以下类会根据设备(屏幕尺寸)来隐藏元素。
我们可以设置元素在不同方向是是否显示或隐藏。笔记本等桌面设备一般是横向的,但是手机和平板设备可以是横向或纵向,我们可以根据用户手机拿的方向来设置元素隐藏与显示:
下面实例根据使用的方向显示文本内容:
实例
<p class="show-for-landscape">文本只在横向显示。</p>
<p class="show-for-portrait">文本只在纵向显示。</p>
<p class="show-for-portrait">文本只在纵向显示。</p>
尝试一下 »
触屏设备的显示与隐藏
你可以根据设备是否支持触摸来显示与隐藏元素。
下面实例根据设备是否支持触摸来显示文本内容:
实例
<p class="show-for-touch">你的设备支持触屏。</p>
<p class="hide-for-touch">你的设备不支持触屏。</p>
尝试一下 »<p class="hide-for-touch">你的设备不支持触屏。</p>
阅读全文