CSS 媒体查询

CSS 媒体查询模块能够测试和查询视口值以及浏览器或设备功能，从而根据当前用户环境有条件地应用 CSS 样式。媒体查询用于 CSS @media 规则以及 HTML 和 JavaScript 等其他上下文和语言中。

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

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

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

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

使用媒体查询: 介绍媒体查询、它们的语法以及用于构建媒体查询表达式的运算符和媒体特性。
学习：媒体查询基础: 媒体查询简介以及使用它们创建响应式设计的方法。
测试媒体查询: 描述如何在 JavaScript 代码中使用媒体查询来确定设备状态，并设置监听器以在媒体查询结果发生变化时通知你的代码（例如，当用户旋转屏幕或调整浏览器大小时）。
使用媒体查询实现无障碍性: 了解媒体查询如何帮助用户更好地理解你的网站。
打印: 有助于改进网页内容打印输出的技巧和技术。
响应式图片: 了解如何将媒体查询与 sizes 结合使用，以在网站上实现响应式图像解决方案。