CSS 媒体查询
CSS2 引入的媒体类型
这 @media CSS2 中引入的规则使得为不同的媒体类型定义不同的样式规则成为可能。
示例：您可以为计算机屏幕设置一组样式规则，为打印机设置一组样式规则，为手持设备设置一组样式规则，为电视型设备设置一组样式规则，等等。
不幸的是，除了打印媒体类型之外，这些媒体类型从未得到设备的大量支持。
CSS3 引入媒体查询
CSS3 中的媒体查询扩展了 CSS2 媒体类型的思想：它们不再查找设备类型，而是查找设备的功能。
媒体查询可用于检查许多事情，例如：
- 视口的宽度和高度
- 设备的宽度和高度
- 方向（平板电脑/手机是横向还是纵向模式？）
- 解决
使用媒体查询是一种向台式机、笔记本电脑、平板电脑和手机（如 iPhone 和 Android 手机）提供定制样式表的流行技术。
浏览器支持
表中的数字表示第一个完全支持 @media 规则。
| 财产 | |||||
|---|---|---|---|---|---|
| @媒体 | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
媒体查询语法
媒体查询由媒体类型组成，可以包含一个或多个表达式，这些表达式可以解析为真或假。
@media 不|仅 媒体类型 和 (表达式) {
CSS 代码；
}
如果指定的媒体类型与显示文档的设备类型匹配，并且媒体查询中的所有表达式都为真，则查询结果为真。当媒体查询为真时，将应用相应的样式表或样式规则，遵循正常的级联规则。
除非使用 not 或 only 运算符，否则媒体类型是可选的，并且 all 类型将被隐含。
您还可以针对不同的媒体使用不同的样式表：
<link rel="stylesheet" media="媒体类型 且|不|仅（表达式)” href="打印.css">
CSS3 媒体类型
| 价值 | 描述 |
|---|---|
| 全部 | 适用于所有媒体类型的设备 |
| 打印 | 用于打印机 |
| 屏幕 | 用于电脑屏幕、平板电脑、智能手机等。 |
| 演讲 | 用于“大声朗读”页面的屏幕阅读器 |
媒体查询简单示例
使用媒体查询的一种方法是在样式表中添加一个备用 CSS 部分。
以下示例在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色将为粉红色）：
以下示例显示了一个菜单，如果视口宽度为 480 像素或更宽，该菜单将浮动至页面左侧（如果视口小于 480 像素，则菜单将位于内容之上）：
更多媒体查询示例
有关媒体查询的更多示例，请转到下一页： CSS MQ 示例.
CSS @media 参考
如需全面了解所有媒体类型和功能/表达方式，请参阅 我们的 CSS 参考中的 @media 规则.
