创新互联Foundation教程：FoundationCSS可见性

Foundation CSS 可见性

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

创新互联-专业网站定制、快速模板网站建设、高性价比河曲网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式河曲网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖河曲地区。费用合理售后完善，十年实体公司更值得信赖。

类	描述
.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- 类的可见性。

你在小型设备上。

你在中型、大型、更大型、超大型的设备上。

你在中型设备上。

你在大型、更大型、超大型的设备上

你在大型设备上。

你在更大型、超大型的设备上。

你在更大型设备上。

你在超大型设备上。

尝试一下 »

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

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

你不在小型设备上。

你不在中型、大型、更大型、超大型的设备上。

你不在中型设备上。

你不在大型、更大型、超大型的设备上。

你不在大型设备上。

你不在更大型、超大型的设备上。

你不在更大型设备上。

你不在超大型设备上。

尝试一下 »

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

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

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

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

文本只在横向显示。


文本只在纵向显示。

尝试一下 »

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

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

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

你的设备支持触屏。


你的设备不支持触屏。


尝试一下 »

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容