从Media Queries到Container Queries的范式转变
CSS响应式布局长期依赖Media Queries，但Media Queries只能根据视口宽度做判断，无法感知组件所在容器的实际可用空间。当同一组件出现在页面不同位置时（侧边栏、主内容区、弹窗），用Media Queries写断点会导致在不同容器中表现不一致。
Container Queries解决了这个问题。它允许CSS规则根据父容器的尺寸做响应式调整，真正实现了组件级别的自适应布局。一个卡片组件放在300px侧边栏里显示单列，放在800px主内容区显示双列，不再需要在组件内部硬编码视口断点。
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 500px) {
.card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1rem;
}
}
@container card (min-width: 300px) and (max-width: 499px) {
.card {
display: flex;
flex-direction: column;
}
}container-type: inline-size声明容器在水平方向上可查询。设为size则同时支持水平和垂直方向的查询，但浏览器支持度更低。container-name给容器命名，用于在@container规则中引用。
容器查询与组件封装的配合模式
Container Queries最大的价值在于组件化开发。以React为例，组件只需声明容器类型和查询规则，不需要关心自己被放在页面的哪个位置：
function ProductCard({ product }) {
return (
<div className="product-card-wrapper">
<div className="product-card">
<img src={product.image} alt={product.name} />
<div className="product-info">
<h3>{product.name}</h3>
<p>{product.description}</p>
<span className="price">{product.price}</span>
</div>
</div>
</div>
);
}
.product-card-wrapper {
container-type: inline-size;
container-name: product;
}
@container product (min-width: 400px) {
.product-card { flex-direction: row; }
}
@container product (max-width: 399px) {
.product-card { flex-direction: column; }
}这个ProductCard组件在任何容器中都能自动适配布局，无需传入断点参数或依赖全局视口宽度。组件的自包含性大幅提升，迁移和复用零成本。
容器查询单位与数学函数
CSS新增了容器查询单位cqw、cqh、cqi、cqb，分别对应容器宽度的1%、高度的1%、内联尺寸的1%、块尺寸的1%。这些单位让字号、间距等属性也跟随容器大小动态变化：
.card-title {
font-size: clamp(1rem, 3cqi, 2rem);
}
.card-body {
padding: clamp(0.5rem, 2cqi, 1.5rem);
}clamp()函数限制输出在最小值和最大值之间，避免容器过小时字号缩到不可读。3cqi表示容器内联尺寸的3%，当容器宽度500px时为15px，当容器宽度1000px时为30px，上限2rem（32px）封顶。
容器查询与CSS Grid的深度集成
容器查询与Grid布局的结合能实现更灵活的自适应网格。当容器变宽时自动增加列数，变窄时减少列数：
.grid-container {
container-type: inline-size;
container-name: grid;
}
@container grid (min-width: 800px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}
@container grid (min-width: 500px) and (max-width: 799px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@container grid (max-width: 499px) {
.grid { grid-template-columns: 1fr; }
}这种写法比repeat(auto-fill, minmax(250px, 1fr))更灵活，因为容器查询可以在不同断点切换完全不同的布局策略，而auto-fill只能做均匀分列。
浏览器兼容性与渐进增强策略
Container Queries在Chrome 105+、Safari 16+、Firefox 110+已获得完整支持。对于不支持的浏览器，可以结合@supports做渐进增强：
/* 回退方案：使用Media Queries */
.card {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.card { flex-direction: row; }
}
/* 支持Container Queries时覆盖 */
@supports (container-type: inline-size) {
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}
@container (max-width: 399px) {
.card { flex-direction: column; }
}
}当浏览器支持容器查询时，组件切换到容器维度的响应式布局；不支持时回退到视口维度的Media Queries，功能不降级。这种渐进增强策略确保旧浏览器中布局不会崩溃，同时新浏览器获得更精确的组件级响应能力。
Container Queries的渲染性能优于频繁的JavaScript resize监听。浏览器引擎在布局计算阶段直接处理容器查询规则，不触发额外的回流重绘。实测在包含200个组件实例的页面中，容器查询的布局计算耗时与Media Queries基本持平，帧率稳定在60fps。
原创文章，作者：小编，如若转载，请注明出处：https://www.yunthe.com/csscontainerqueries-rong-qi-cha-xun-yu-zu-jian-ji-xiang/
