CSS容器查询核心原理与浏览器支持
CSS容器查询（Container Queries）是CSS规范近年最重要的特性之一，解决了媒体查询（Media Queries）只能基于视口尺寸响应的局限性。容器查询让组件根据自身容器尺寸自适应布局，实现真正的组件级响应式设计，而非页面级响应式。
传统媒体查询@media基于viewport宽度调整样式，在侧边栏、弹窗、卡片网格等场景下表现不佳——同一组件在主内容区和侧边栏中需要不同布局，但viewport宽度相同，媒体查询无法区分。容器查询通过@container规则，让组件根据父容器尺寸独立响应。
浏览器支持情况：Chrome 105+、Firefox 110+、Safari 16+、Edge 105+均已支持。Can I Use数据显示全球支持率超过92%。对于需要兼容旧浏览器的项目，可使用container-query-polyfill做降级处理。
基本语法分两步：先在父元素声明容器，再用@container写查询规则：
.card-wrapper {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1rem;
}
}
@container card (max-width: 399px) {
.card {
display: flex;
flex-direction: column;
}
}container-type: inline-size表示容器按行内方向尺寸查询，最常用。size类型同时响应宽高，但性能开销更大。inline-size只监听宽度变化，覆盖绝大多数响应式场景。
容器查询与媒体查询的架构差异
容器查询和媒体查询解决不同层次的问题。媒体查询处理页面级布局变化（导航栏折叠、侧边栏显隐），容器查询处理组件级布局变化（卡片横竖切换、列表网格切换）。两者可组合使用：
/* 页面级：侧边栏在窄视口下隐藏 */
@media (max-width: 768px) {
.sidebar { display: none; }
}
/* 组件级：卡片在窄容器下竖排 */
@container card (max-width: 300px) {
.card-content { flex-direction: column; }
.card-image { width: 100%; }
}关键差异总结：
1. 查询对象不同：@media查询viewport，@container查询指定祖先元素
2. 作用域不同：@media全局生效，@container只在声明的容器子树内生效
3. 响应速度不同：@container无需等待viewport resize事件，容器尺寸变化即触发，响应更及时
4. 可复用性不同：同一组件在不同容器中自动适配，无需额外媒体查询断点
实战：构建自适应卡片网格组件
卡片网格是容器查询最典型的应用场景。卡片在宽容器中横排展示图片+文字，窄容器中竖排堆叠：
<!-- HTML结构 -->
<div class="dashboard">
<main class="content-area">
<div class="grid">
<div class="card-wrapper">
<article class="card">
<img src="thumb.jpg" alt="" class="card-img">
<div class="card-body">
<h3 class="card-title">标题</h3>
<p class="card-desc">描述文本</p>
</div>
</article>
</div>
</div>
</main>
<aside class="sidebar">
<div class="card-wrapper">
<article class="card">...</article>
</div>
</aside>
</div>/* 容器声明 */
.card-wrapper {
container-type: inline-size;
container-name: card;
}
/* 默认窄布局（竖排） */
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
}
.card-img {
width: 100%;
height: 180px;
object-fit: cover;
}
/* 宽容器下横排 */
@container card (min-width: 360px) {
.card {
flex-direction: row;
}
.card-img {
width: 160px;
height: auto;
min-height: 120px;
}
}
/* 更宽容器下图片更大 */
@container card (min-width: 560px) {
.card-img {
width: 240px;
}
.card-body {
padding: 1.5rem;
}
}主内容区的卡片容器宽度通常在560px以上，自动切换到横排大图布局；侧边栏的卡片容器宽度不足360px，保持竖排小图布局。同一CSS代码，组件自动适配不同容器。
容器查询单位与高级用法
CSS容器查询单位（Container Query Units）是配套新单位，相对于容器尺寸计算：
– cqw：容器宽度的1%
– cqh：容器高度的1%
– cqi：容器行内尺寸的1%
– cqb：容器块级尺寸的1%
.card-title {
font-size: clamp(1rem, 3cqi, 1.5rem);
padding: 2cqi;
}
.card-img {
height: 30cqb;
}cqi是最常用的容器查询单位，与container-type: inline-size配合使用。clamp()函数与容器查询单位结合实现无断点的流畅缩放，避免@container断点处的视觉跳变。
容器名称的嵌套查询：嵌套容器中，内层@container默认查询最近声明container-type的祖先。如需查询特定容器，用container-name指定：
.outer-container {
container-type: inline-size;
container-name: outer;
}
.inner-container {
container-type: inline-size;
container-name: inner;
}
/* 查询外层容器 */
@container outer (min-width: 800px) {
.layout { grid-template-columns: 1fr 1fr; }
}
/* 查询内层容器 */
@container inner (min-width: 300px) {
.component { flex-direction: row; }
}容器查询性能与最佳实践
容器查询的性能影响主要在容器尺寸变化的计算上。浏览器需要监测每个声明container-type的元素尺寸，容器数量过多会影响渲染性能。最佳实践：
1. 只在需要的元素上声明container-type，不要全局设置
2. 优先使用inline-size类型而非size类型，减少监测维度
3. 避免深层嵌套容器查询，一般不超过2层
4. @container规则内避免使用耗时属性（如filter、box-shadow动画）
组件化CSS架构下，容器查询天然适配：每个组件定义自己的容器，样式自包含，不会与页面其他组件冲突。与CSS Modules或Scoped CSS结合效果最佳。
容器查询不是媒体查询的替代品，而是互补工具。页面级布局变化用@media，组件级响应式用@container。两者配合使用，才能构建出既适配不同设备又适配不同容器上下文的弹性界面。
原创文章，作者：小编，如若转载，请注明出处：https://www.yunthe.com/css-rong-qi-cha-xun-yu-zu-jian-ji-xiang-ying-shi-bu-ju-shi/
