CSS怎么根据屏幕尺寸隐藏或显示元素
CSS怎么根据屏幕尺寸隐藏或显示元素
发布时间：2022-03-10 17:09:15 来源：高防服务器网 阅读：50 作者：iii 栏目：web开发
本文小编为大家详细介绍“CSS怎么根据屏幕尺寸隐藏或显示元素”，内容详细，步骤清晰，细节处理妥当，希望这篇“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>
读到这里，这篇“CSS怎么根据屏幕尺寸隐藏或显示元素”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注高防服务器网行业资讯频道。
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[