一、基本概念
容器查询是CSS的一项强大功能，使开发者能够依据元素 父容器 的尺寸、内联大小、块大小或特定样式属性来动态应用样式，突破了传统媒体查询仅依赖视口大小的限制。它让组件具备“感知上下文”的能力，能够根据自身所处容器的实际空间状况自适应渲染，从而实现更精细、更灵活的响应式设计能力。
这种局部化、模块化的响应机制特别适用于复杂布局和可复用组件的开发，例如卡片组件在不同宽度的侧边栏或主内容区中自动调整排版，而无需依赖全局断点。容器查询推动了真正意义上的组件级响应式，使设计更加解耦、可维护，极大提升了现代前端开发的灵活性与可扩展性。
1.1 与媒体查询的区别
媒体查询：基于视口大小或设备特征应用样式（外部环境）。
容器查询：基于元素所在容器的尺寸或特性应用样式（内部环境）。
二、CSS包含类型（Containment Types）
容器查询基于CSS包含（Containment）机制，包含四种类型：
包含类型 | 描述 |
|---|---|
size | 元素尺寸完全由其内容决定，不影响外部布局 |
layout | 元素的布局独立于外部环境，内部布局变化不影响外部 |
style | 元素的样式计算独立于外部环境 |
paint | 元素的绘制独立于外部环境，仅在其边界内绘制 |
这些包含类型可以组合使用，为容器查询提供基础。
三、容器查询核心属性
3.1 container-type
定义容器查询的尺寸基础：
属性值 | 描述 |
|---|---|
normal | 默认值，不创建容器上下文 |
size | 同时基于容器的宽度和高度进行查询 |
inline-size | 仅基于容器的行向尺寸（通常是宽度）进行查询 |
block-size | 仅基于容器的块向尺寸（通常是高度）进行查询 |
3.2 container-name
为容器定义名称，用于在多个容器中精准定位：
命名规范
不能使用关键字：or、and、not、default。
不需要引号。
允许使用短横线（-）。
允许空格分隔多个名称（如：container-name: main sidebar;）。
3.3 container（简写属性）
同时设置容器名称和类型：
示例：
.container {
container: my-container / inline-size;
}
/* 等价于 */
.container {
container-name: my-container;
container-type: inline-size;
}四、容器查询语法（@container规则）
使用 @container 规则定义容器查询：
避免和媒体查询混淆
@media 查的是整个浏览器窗口。
@container 查的是你指定的那个父容器。
4.1 基本语法
@container <container-name>? <container-condition> {
/* 符合条件时应用的样式 */
}4.2 示例
如何使用容器查询？使用容器查询分为两步：
声明一个查询容器（使用container-type 、container-name 或 container ）。
为容器内的元素定义响应式规则（使用 @container）。
4.2.1 基于默认容器示例
.sidebar {
width: 100%;
container-type: inline-size;
}
@container (min-width: 768px) {
.sidebar {
width: 300px;
}
}4.2.2 基于命名容器
/* 定义命名容器 post-container */
.post {
/* container 为简写属性 */
container: post-container / inline-size;
}
/* 应用命名容器 post-container */
@container post-container (min-width: 400px) {
.post-content {
display: flex;
gap: 1rem;
}
}下图清晰地展示了从声明容器到应用查询样式的完整工作流程：
五、容器查询长度单位
容器查询提供了一套专门的长度单位，基于容器的尺寸：
单位 | 英文全称 | 描述 |
|---|---|---|
cqw | Container Query Width | 容器宽度的1% |
cqh | Container Query Height | 容器高度的1% |
cqi | Container Query Inline Size | 容器行向尺寸的1%（通常是宽度） |
cqb | Container Query Block Size | 容器块向尺寸的1%（通常是高度） |
cqmin | Container Query Minimum | cqi 和cqb 中较小的值 |
cqmax | Container Query Maximum | cqi 和cqb 中较大的值 |
与视口单位的直观对比
单位 | 基准 |
|---|---|
50vw | 视口宽度的 50% |
50cqw | 容器宽度的 50% |
示例
.card-title {
font-size: 2cqw; /* 字体大小为容器宽度的2% */
}
@media (min-width: 768px) {
.card-title {
font-size: 3cqw; /* 在大屏幕上，字体大小为容器宽度的3% */
}
}六、样式查询（Style Queries）
除了尺寸查询，容器查询还支持样式查询，可以基于容器的CSS属性值应用样式：
语法
@container style(<style-feature>),
not style(<style-feature>),
style(<style-feature>) and style(<style-feature>),
style(<style-feature>) or style(<style-feature>) {
/* 符合条件时应用的样式 */
}示例
/* 当容器具有特定自定义属性时 */
@container style(--theme: dark) {
.card {
background-color: #333;
color: #fff;
}
}
/* 复合条件 */
@container style(--layout: grid) and (min-width: 600px) {
.card {
grid-template-columns: repeat(2, 1fr);
}
}注意：目前浏览器主要支持基于自定义属性的样式查询。
七、使用场景
容器查询特别适合以下场景：
组件库开发：组件可以根据不同容器大小自适应。
嵌套布局：内部元素需要根据父容器大小调整。
响应式设计：提供更精细的响应式控制，不受视口限制。
复杂布局系统：如仪表板、卡片网格、侧边栏等。
八、浏览器支持
容器查询在现代浏览器中得到了广泛支持：
Chrome 105+
Firefox 110+
Safari 16+
Edge 105+
建议访问《Can I Use》网站，以及时了解 容器查询 在各类浏览器中的最新兼容性支持情况。
九、最佳实践
使用 inline-size 而非 size：除非确实需要同时基于宽度和高度查询，否则使用 inline-size 可以获得更好的性能。
合理命名容器：为复杂布局中的容器命名，提高代码可读性。
结合媒体查询：容器查询和媒体查询可以协同工作，提供更灵活的响应式设计。
注意性能：过度使用容器查询可能影响性能，特别是在复杂布局中。
十、核心对比：容器查询 vs. 媒体查询
特性维度 | 媒体查询 (Media Queries) | 容器查询 (Container Queries) |
|---|---|---|
查询对象 | 浏览器视口（viewport） | 父容器元素 |
设计思路 | 页面级响应式设计 | 组件级驱动式设计 |
灵活性 | 较低，依赖固定视口断点 | 高，组件可适应任何容器环境 |
可复用性 | 组件样式与特定视口绑定 | 组件样式与自身容器绑定，复用性强 |
典型问题 | 媒体查询：同一组件在不同页面区域无法自适应 | |
典型问题 | 容器查询：完美解决组件在侧边栏、主内容区等不同场景的适配 | |
总结
CSS容器查询代表了CSS布局的重大进步，它将响应式设计的粒度从单一的“视口/页面”级别，精细地细化到了“组件”级别。
这项关键技术使UI组件能够摆脱对全局视口尺寸的依赖，转而感知并适应其所在的 局部容器环境。通过赋予组件“智能”调整样式的能力，容器查询让开发者能够构建真正模块化、高可复用的组件库。
它是实现“组件驱动式Web设计”的基石，与媒体查询及其他CSS特性协同工作，共同为现代Web开发提供了更强大、更灵活的响应式布局解决方案。
彩蛋
本文于 Cnb 平台呈现了完整的容器查询示例代码，欢迎前往阅读《CSS 容器查询完整示例》以获取详尽内容。
