欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > 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>

 


根据屏幕尺寸隐藏元素

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

描述
.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>

 


根据屏幕方向显示元素

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

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

描述
.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>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r50494.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-06-22 08:38 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。