Foundation CSS 可见性
时间2024-05-23 21:00:03发布访客分类CSS浏览85
导读：根据屏幕尺寸显示元素 以下类会根据设备(屏幕尺寸 来显示元素。 类 描述 .show-for-small...
根据屏幕尺寸显示元素
以下类会根据设备(屏幕尺寸)来显示元素。
| 类 |
描述 |
| .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 |
在支持触屏的设备上隐藏(不支持的设备上显示) |
下面实例根据设备是否支持触摸来显示文本内容：
实例
你的设备支持触屏。
你的设备不支持触屏。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Foundation CSS 可见性
本文地址： https://pptw.com/jishu/666563.html
