Foundation CSS 可见性

🌙
手机阅读
本文目录结构
axihe

Foundation CSS 可见性


b根据屏幕尺寸显示元素

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

描述
.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-touch在支持触屏的设备上显示(不支持的设备上隐藏)
.hide-for-touch在支持触屏的设备上隐藏(不支持的设备上显示)
<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>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang