前言：响应式设计的进化
多年来，媒体查询（Media Queries）一直是响应式网页设计的基石，它允许我们根据视口（viewport）尺寸来调整页面布局。然而，随着组件化开发的普及，开发者们越来越需要一种能够让组件自身响应其“生存环境”的机制。CSS 容器查询（Container Queries）正是为此而生，它标志着响应式设计从页面级迈向了组件级。
容器查询 vs. 媒体查询：核心区别
要理解容器查询的价值，首先要明确它与媒体查询的根本不同。
- 媒体查询：作用于整个文档，它关心的是“整个浏览窗口有多宽？”。样式规则基于视口的尺寸、方向等全局属性。
- 容器查询：作用于单个元素，它关心的是“我的父容器有多宽？”。样式规则基于特定容器元素的尺寸。
这种转变意味着我们可以构建真正独立、可移植的组件。一个卡片组件无论被放在宽阔的主内容区还是狭窄的侧边栏，都能自我调整布局，而无需依赖任何页面级的媒体查询。
如何使用容器查询
实现容器查询主要分为两步：定义查询容器和应用查询规则。
步骤一：定义查询容器
首先，你需要告诉浏览器哪个元素将作为其后代元素进行尺寸查询的“容器”。这通过 container-type 属性实现。
css
.card-container {
/*
* 将此元素设置为一个查询容器。
* `inline-size` 表示我们主要关心其宽度（内联尺寸）的变化。
* 其他值还包括 `size` (宽度和高度) 和 `normal`。
*/
container-type: inline-size;
}你还可以使用 container-name 为容器命名，这在处理嵌套容器或更复杂的场景时非常有用。
步骤二：应用查询规则
一旦定义了容器，就可以使用 @container 规则来为其内部的元素应用条件样式了，语法与 @media 非常相似。
假设我们有一个卡片组件，希望在容器宽度超过 400px 时，将图片和文字从垂直排列变为水平排列。
css
/* 卡片默认样式：垂直布局 */
.card {
display: flex;
flex-direction: column;
}
/* 当 .card 的任意一个祖先查询容器宽度 >= 400px 时 */
@container (min-width: 400px) {
.card {
flex-direction: row;
align-items: center;
}
}实际应用场景
容器查询的出现解锁了许多过去难以实现的组件设计模式：
- 可复用卡片：在网格布局、侧边栏或主内容区中，卡片组件都能呈现最合适的样式。
- 动态小部件：一个日历小部件在宽容器中显示完整的月视图，在窄容器中则自动切换为紧凑的日程列表。
- 自适应表单元素：输入框和按钮组可以根据其所在的表单容器宽度调整大小和布局。
浏览器支持与总结
自 2022 年底以来，所有主流现代浏览器（包括 Chrome, Firefox, Safari, Edge）均已稳定支持容器查询。这项功能不再是实验性的，可以放心在生产环境中使用。
容器查询赋予了前端开发者前所未有的能力去构建更加模块化、上下文感知和健壮的 UI 组件。它是现代 CSS 工具箱中一个强大且重要的补充，值得每一位前端开发者学习和掌握。