媒体查询 是 响应式设计的关键组成部分，这使得根据参数和设备特性调整CSS成为可能。
比如说，媒体查询能够在用户设备屏幕小于一定的尺寸或者保持在横向或者纵向的模式时，提供不同的样式。@media （at-rule CSS样式声明，以@开头）被用作有条件的向文档提供样式。
此外，媒体查询的语法也可以被用在其他上下文中，比如说在<source> 元素中的media属性, 在选择一张具体图片用于一个<picture> 元素时，可以设置一个用于确定是否使用该资源的媒体查询字符串。
此外, Window.matchMedia()方法能够针对一个媒体查询测试一个window窗口。你也可以使用 MediaQueryList.addListener()方法随时随地的获取媒体查询变化的通知。通过这个方法，你的网站或者APP可以对设备配置、方向或者状态的改变作出相应。
你能在测试媒体查询中学习到更多关于使用媒体查询编程的内容。
参考
At-rules
指南
- 使用媒体查询
- 介绍了媒体查询及其语法以及被用于构建媒体查询表达式的运算符和媒体特征。
- 测试媒体查询
- 介绍如何以编程方式用JavaScript代码方式测试媒体查询，以确定设备的状态，并且设置监听，当媒体查询的结果发生改变时（比如说当用户旋转屏幕，导致方向改变），你的代码能够得到通知。
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| CSS Conditional Rules Module Level 3 | Candidate Recommendation | |
| Media Queries Level 4 | Candidate Recommendation | |
| Media Queries | Recommendation | |
| CSS Level 2 (Revision 1) | Recommendation | Initial definition |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 9.0 | 9.2 | 1.3 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.7) | 9.0 | 9.0 | 3.1 |