Media Queries 媒体查询

媒体查询是响应式设计的关键组成部分，这使得CSS可以根据各种参数或设备特性进行调整。例如，如果屏幕小于特定尺寸，或者基于用户是以纵向模式还是横向模式持有他们的设备，则媒体查询可以应用不同的样式。该@media@规则用于有条件地应用样式到文档。

另外，媒体查询语法也用于其他上下文中，例如在<source>元素的media属性中，其可以被设置为媒体查询字符串以用于在选择要在特定图像中，使用的特定图像时确定是否使用该源<picture>元件。

另外，该Window.matchMedia()方法可以用于针对媒体查询来测试窗口。

MediaQueryList.addListener()只要查询的状态发生变化，您也可以使用这些通知。借助此功能，您的网站或应用可以响应设备配置，方向或状态的更改。

您可以在测试媒体查询中了解更多关于使用媒体查询进行编程的信息

参照系

规则

• @import

• @media

导轨

使用媒体查询

介绍媒体查询及其语法，以及用于构建媒体查询表达式的运算符和媒体功能。测试媒体查询描述如何从JavaScript代码测试媒体查询，以编程方式确定设备的状态，并设置当媒体查询的结果发生变化时（例如，当用户旋转屏幕，导致方向改变时），可以通知报告给您的代码。

规范

浏览器兼容性