Collection
Collection
[toc]
| 序号 | 类型 | 描述 |
|---|---|---|
| 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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
min-width: 500pxprint and (color)and和notand表示多个“媒体描述符”必须同时满足,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>