CSS 媒体查询

CSS 媒体查询 模块允许测试和查询视窗值以及浏览器或设备特性，以便根据当前用户环境有条件地应用 CSS 样式。媒体查询在 CSS @media 规则和其他上下文和语言（如 HTML 和 JavaScript）中使用。

媒体查询是 响应式设计 的关键组成部分。它们允许根据设备特性的存在或值有条件地设置 CSS 样式。通常使用基于 视窗 大小的媒体查询来在具有不同屏幕尺寸的设备上设置适当的布局，例如在宽屏幕上使用三列，在窄屏幕上使用一列。

其他常见示例包括在打印页面时增加字体大小和隐藏导航菜单，在以纵向或横向模式查看页面时调整段落之间的填充，或在触摸屏上增加按钮的大小以提供更大的点击区域。

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

在设计可重复使用的 HTML 组件时，您还可以使用 容器查询，它允许您根据包含元素的大小而不是视窗或其他设备特性来应用样式。