媒体查询 | Media Queries
媒体查询是响应式设计的关键组成部分，这使得CSS可以根据各种参数或设备特性进行调整。例如，如果屏幕小于特定尺寸，或者基于用户是以纵向模式还是横向模式持有他们的设备，则媒体查询可以应用不同的样式。该@media@规则用于有条件地应用样式到文档。
另外，媒体查询语法也用于其他上下文中，例如在<source>元素的media属性中，其可以被设置为媒体查询字符串以用于在选择要在特定图像中，使用的特定图像时确定是否使用该源<picture>元件。
另外，该Window.matchMedia()方法可以用于针对媒体查询来测试窗口。
您可以在测试媒体查询中了解更多关于使用媒体查询进行编程的信息
参照系
规则
@import
@media
导轨
使用媒体查询
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Conditional Rules Module Level 3 | Candidate Recommendation | |
| Media Queries Level 4 | Working Draft | |
| Media Queries | Recommendation | |
| CSS Level 2 (Revision 1) | Recommendation | Initial definition |
浏览器兼容性
| 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 |
