©
本文档使用
php.cn手册 发布
以下类会根据设备(屏幕尺寸)来显示元素。
类 | 描述 |
---|---|
.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-
类的可见性。
1 2 3 4 5 6 7 8 |
|
实例预览 »
以下类会根据设备(屏幕尺寸)来隐藏元素。
类 | 描述 |
---|---|
.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) |
1 2 3 4 5 6 7 8 |
|
实例预览 »
以下类会根据设备(屏幕尺寸)来隐藏元素。
我们可以设置元素在不同方向是是否显示或隐藏。笔记本等桌面设备一般是横向的,但是手机和平板设备可以是横向或纵向,我们可以根据用户手机拿的方向来设置元素隐藏与显示:
类 | 描述 |
---|---|
.show-for-landscape | 在横向时显示元素(纵向隐藏) |
.show-for-portrait | 在纵向时显示元素(横向隐藏) |
下面实例根据使用的方向显示文本内容:
1 2 |
|
你可以根据设备是否支持触摸来显示与隐藏元素。
类 | 描述 |
---|---|
.show-for-touch | 在支持触屏的设备上显示(不支持的设备上隐藏) |
.hide-for-touch | 在支持触屏的设备上隐藏(不支持的设备上显示) |
下面实例根据设备是否支持触摸来显示文本内容:
1 2 |
|
关于我们 联系我们 留言板
手册网