媒体查询

在 HTML 中使用媒体查询

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

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

在 JavaScript 中使用媒体查询

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

你可以在测试媒体查询中学到更多通过编程方式使用媒体查询的知识。

参考

At 规则

• @import
• @media

指南

使用媒体查询

介绍媒体查询及其语法，以及用于构造媒体查询表达式的运算符和媒体特性。

通过编程方式使用媒体查询

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

使用媒体查询增强无障碍

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

打印

帮助改进 Web 内容打印输出的技巧和技术。

规范

参见

• 容器查询
• 使用 @supports 来根据浏览器支持的 CSS 技术应用样式。