css3 媒体查询
[toc]
1. 媒体类型
- 媒体类型是不同媒体的标志符
| 序号 | 类型 | 描述 |
|---|---|---|
| 1 | all |
所有媒体类型，即不限制 |
| 2 | print |
打印机，预览打印预览使用 |
| 3 | screen |
屏幕，如浏览器等用户代理 |
| 4 | projection |
幻灯片 |
多媒体类型之间使用逗号分隔：
@media screen,print
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>媒体查询</title><style>h1{color: rgb(205, 50, 50);}body{background-color: turquoise;}/* 媒体查询 *//* 当屏幕尺寸大于等于500px时，以下样式有效 */@media screen and (min-width: 500px){h1{color: rgb(50, 112, 205);}body{background-color: rgb(212, 224, 176);}}</style></head><body><h1>hello,欢迎来学习我的课程</h1></body></html>
2. 媒体描述符
- 媒体类型通常会添加“媒体描述符”进行精准限制，例如设置媒体尺寸，分辨率等
- 媒体描述符的语法和css样式声明非常类似，如
min-width: 500px - 与css声明的不同之处在于，媒体描述符允许没有值，如
print and (color) - 多个“媒体描述符”之间使用“逻辑关键字”连接，如
and和not and表示多个“媒体描述符”必须同时满足,not则是整个查询取反，且必须写在and前面
常用 “媒体描述符”(显示区域相关)
| 序号 | 媒体描述符 | 描述 |
|---|---|---|
| 1 | width |
显示区域宽度 |
| 2 | min-width |
显示区域最小宽度 |
| 3 | max-width |
显示区域最大宽度 |
| 4 | device-width |
设备显示区域宽度 |
| 5 | min-device-width |
设备显示区域最小宽度 |
| 6 | max-device-width |
设备显示区域最大宽度 |
| 7 | height |
显示区域高度 |
| 8 | min-height |
显示区域最小高度 |
| 9 | max-height |
显示区域最大高度 |
| 10 | device-height |
设备显示区域高度 |
| 11 | min-device-height |
设备显示区域最小高度 |
| 12 | max-device-height |
设备显示区域最大高度 |
max-width与max-device-width区别:
max-width: 浏览器显示区域宽度,与设备无关,通常用于 PC 端max-device-width: 设备分辨率的最大宽度,通常用于移动端
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>局部媒体查询</title><style>.nav{height: 50px;background-color: white;display: flex;align-items: center;}.nav ul{display: flex;list-style: none;}.nav ul a{color: turquoise;text-decoration: none;padding: 0 15px;}/* 局部媒体查询，当屏幕宽度小于等于500px，显示以下样式 */@media screen and (max-width: 500px){/* 隐藏列表项 */.nav ul{display: none;}}</style></head><body><div class="nav"><div class="log">LOGO</div><ul><li><a href="">首页</a><a href="">视频</a><a href="">问答</a><a href="">下载</a></li></ul></div></body></html>