媒体查询 - CSS（层叠样式表） 编辑

通过媒体查询（Media queries），您可以根据各种设备特征和参数的值或者是否存在来调整您的网站或应用。

它们是响应式设计的关键组成部分。 例如，媒体查询可以缩小小型设备上的字体大小，在纵向模式下查看页面时增加段落之间的填充，或者增加触摸屏上按钮的大小。

在 CSS 中，使用 @media at-rule 根据媒体查询的结果有条件地应用样式表的一部分。 使用 @import 有条件地应用整个样式表。

在 HTML 中使用媒体查询

在 HTML 中，媒体查询可以应用于各种元素：

• 在<link>元素的media属性中，它们定义了待应用链接资源（通常是CSS）的媒体。
• 在<source>元素的media属性中，它们定义待应用源的媒体。 （这仅在<picture>元素内有效。）
• 在<style>元素的media属性中，它们定义待应用样式的媒体。

在 JavaScript 中使用媒体查询

在JavaScript中，您可以使用 Window.matchMedia() 方法根据媒体查询测试窗口。 您还可以使用MediaQueryList.addListener()在查询状态发生变化时收到通知。 借助此功能，您的站点或应用可以响应设备配置，方向或状态的更改。

您可以学习更多以编程方式使用媒体查询在测试媒体查询中。

参考

At-rules

• @import
• @media

指南

使用媒体查询

介绍媒体查询和媒体查询的的语法以及用于构造媒体查询表达式的运算符和媒体功能。

编程方式使用媒体查询

描述如何在 JavaScript 代码中使用媒体查询来确定设备的状态，以及设置在媒体查询结果发生更改时（例如，当用户旋转屏幕或调整浏览器大小时）通知代码的监听器。

使用媒体查询增强网站的可访问性

了解媒体查询如何帮助用户更好地了解您的网站。

规范

规范	状态	备注
Media Queries Level 5	Editor's Draft
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

浏览器兼容性

@media rule

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• Use @supports to apply styles that depend on browser support for various CSS technologies.