例子
tip
当浏览器窗口的宽度为 600 像素或更小时，将 body 元素的背景颜色更改为“浅蓝色”：
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
定义和使用
该@media规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。
媒体查询可用于检查许多事情，例如：
- 视口的宽度和高度
- 设备的宽度和高度
- 方向（平板电脑/手机是横向还是纵向模式？）
- 解析度
使用媒体查询是向台式机、笔记本电脑、平板电脑和手机提供定制样式表（响应式网页设计）的一种流行技术。
您还可以使用媒体查询来指定某些样式仅适用于打印文档或屏幕阅读器（媒体类型：打印、屏幕或语音）。
除了媒体类型，还有媒体功能。媒体功能通过允许测试用户代理或显示设备的特定功能，为媒体查询提供更具体的细节。例如，您可以仅将样式应用于大于或小于特定宽度的那些屏幕。
CSS 语法
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
tip
not , only和and关键字的含义：
not： not 关键字反转整个媒体查询的含义。
only: only 关键字阻止不支持具有媒体功能的媒体查询的旧浏览器应用指定的样式。 它对现代浏览器没有影响。
and： and 关键字将媒体特征与媒体类型或其他媒体特征结合起来。
它们都是可选的。但是，如果您使用not或 only，您还必须指定媒体类型。
您还可以为不同的媒体设置不同的样式表，如下所示：
<link
rel="stylesheet"
media="screen and (min-width: 900px)"
href="widescreen.css"
/>
<link
rel="stylesheet"
media="screen and (max-width: 600px)"
href="smallscreen.css"
/>
....
媒体类型
| Value | Description |
|---|---|
| all | 默认。用于所有媒体类型设备 |
| 用于打印机 | |
| screen | 用于电脑屏幕、平板电脑、智能手机等 |
| speech | 用于大声“阅读”页面的屏幕阅读器 |
媒体功能
| Value | Description |
|---|---|
| any-hover | 是否有任何可用的输入机制允许用户悬停在元素上？（在媒体查询第 4 级中添加） |
| any-pointer | 是否有任何可用的输入机制是定点设备，如果是，其准确度如何？（在媒体查询第 4 级中添加） |
| aspect-ratio | 视口的宽度和高度之间的比率 |
| color | 输出设备的每个颜色分量的位数 |
| color-gamut | 用户代理和输出设备支持的近似颜色范围（添加在媒体查询级别 4 中） |
| color-index | 设备可以显示的颜色数 |
| grid | 设备是网格还是位图 |
| height | 视口高度 |
| hover | 主输入机制是否允许用户悬停在元素上？（在媒体查询第 4 级中添加） |
| inverted-colors | 浏览器或底层操作系统是否反转颜色？（在媒体查询第 4 级中添加） |
| light-level | 当前环境光级别（添加到媒体查询级别 4 中） |
| max-aspect-ratio | 显示区域的宽度和高度之间的最大比率 |
| max-color | 输出设备的每个颜色分量的最大位数 |
| max-color-index | 设备可以显示的最大颜色数 |
| max-height | 显示区域的最大高度，如浏览器窗口 |
| max-monochrome | 单色（灰度）设备上每种“颜色”的最大位数 |
| max-resolution | 设备的最大分辨率，使用 dpi 或 dpcm |
| max-width | 显示区域的最大宽度，如浏览器窗口 |
| min-aspect-ratio | 显示区域的宽度和高度之间的最小比率 |
| min-color | 输出设备的每个颜色分量的最小位数 |
| min-color-index | 设备可以显示的最小颜色数 |
| min-height | 显示区域的最小高度，如浏览器窗口 |
| min-monochrome | 单色（灰度）设备上每种“颜色”的最小位数 |
| min-resolution | 设备的最小分辨率，使用 dpi 或 dpcm |
| min-width | 显示区域的最小宽度，如浏览器窗口 |
| monochrome | 单色（灰度）设备上每种“颜色”的位数 |
| orientation | 视口的方向（横向或纵向模式） |
| overflow-block | 输出设备如何处理沿块轴溢出视口的内容（在媒体查询级别 4 中添加） |
| overflow-inline | 是否可以滚动沿内联轴溢出视口的内容（在媒体查询级别 4 中添加） |
| pointer | 主要输入机制是定点设备吗？如果是，其准确度如何？（在媒体查询第 4 级中添加） |
| resolution | 输出设备的分辨率，使用 dpi 或 dpcm |
| scan | 输出设备的扫描过程 |
| scripting | 脚本（如 JavaScript）可用吗？（在媒体查询第 4 级中添加） |
| update | 输出设备修改内容外观的速度有多快（添加在媒体查询第 4 级中） |
| width | 视口宽度 |