媒体查询

CSS 媒体查询（media query）是响应式设计的关键组成部分，你可以根据各种设备特征和参数是否存在以及对应的值来应用 CSS 样式。

通常根据视口大小来应用媒体查询，以便可以为不同屏幕大小的设备做出布局调整。例如，你可以为小屏设备设置较小的字体，在纵向模式下查看页面时增加段落间的边距，或者增加触摸屏上按钮的大小。

笔记本电脑和移动设备具有不同的视口大小，可以使用媒体查询进行查询，我们可以看到内容布局的不同。

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

在设置可重用的 HTML 组件时，你还可以使用容器查询，它允许你根据容器元素的大小而非视口或者其他设备特征来应用样式。

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

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

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

参考

使用媒体查询: 介绍媒体查询及其语法，以及用于构造媒体查询表达式的运算符和媒体特性。
通过编程方式使用媒体查询: 描述如何在 JavaScript 代码中使用媒体查询来确定设备的状态，以及设置在媒体查询结果发生更改时（例如，当用户旋转屏幕或调整浏览器大小时）通知代码的监听器。
使用媒体查询增强无障碍: 了解媒体查询如何帮助用户更好地了解你的网站。
打印: 帮助改进 Web 内容打印输出的技巧和技术。