用法
用法一
<link rel="stylesheet" media="具体的媒体查询" href="xx.css">
用法二
@media 媒体类型/媒体特性{};
媒体类型
| 值 | 含义 |
|---|---|
all | 检查所有设备 |
screen | 检测电子屏幕,包括:电子屏幕,平板屏幕,手机屏幕等 |
print | 检测打印机 |
媒体特性
| 值 | 含义 |
|---|---|
width | 检测视口宽度 |
max-width | 检测视口最大宽度 |
min-width | 检测视口最小宽度 |
height | 检测视口高度 |
max-height | 检测视口最大高度 |
min-height | 检测视口最小高度 |
device-width | 检测屏幕宽度 |
max-device-width | 检测屏幕最大宽度 |
min-device-width | 检测屏幕最小宽度 |
orientation | 检测视口的旋转方向(是否横屏)1.portrait:视口处于纵向,即高度大于等于宽度2.landscape:视口处于横向,即宽度大于高度 |
运算符
| 值 | 含义 |
|---|---|
and | 并且 |
,或or | 或 |
not | 否定 |
only | 肯定 |
常用阈值
超小屏幕:x<=768px 中等屏幕768<=x>=992px 大屏幕:992px<=x>=1200px 超大屏幕:x>=1200px