容器查询（Container Queries）需在目标元素的直接父容器上声明 container-type，否则媒体查询条件无法生效；本文详解如何正确设置容器上下文并响应式切换 grid-template-columns。
容器查询（container queries）需在目标元素的**直接父容器**上声明 `container-type`，否则媒体查询条件无法生效；本文详解如何正确设置容器上下文并响应式切换 grid-template-columns。
CSS 容器查询（Container Queries）是现代布局中实现组件级响应式设计的关键能力——它让样式规则基于组件自身容器的尺寸（而非整个视口），从而提升可复用性与封装性。但一个常见误区是：直接在目标元素（如 .list）上设置 container-type，却期望其内部的 @container 规则生效。这不符合规范：@container 查询作用于该规则所选中元素的容器上下文，而容器上下文必须由祖先元素显式提供（即设置 container-type 的祖先才是“容器”）。
✅ 正确做法是：为 .list 的直接父元素添加 container-type: inline-size，使其成为可查询的容器；随后在 @container 规则中选择 .list（或其子元素）应用样式变更。
以下为可运行的完整示例：
<div class="wrapper">
<div class="list">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
</div>
</div>
/* ✅ 关键：wrapper 是 .list 的容器，需在此声明 container-type */
.wrapper {
container-type: inline-size;
}
.list {
background-color: #666;
display: grid;
gap: 4px; /* 推荐使用 gap 替代已废弃的 grid-gap */
grid-template-columns: repeat(5, 1fr);
}
.letter {
display: grid;
grid-auto-flow: row;
justify-items: center;
align-content: center;
color: white;
aspect-ratio: 1 / 1;
background-color: #333;
}
/* ✅ @container 查询作用于 .wrapper 容器的尺寸 */
@container (max-width: 500px) {
.list {
grid-template-columns: repeat(2, 1fr);
}
.letter {
background-color: #2e7d32;
}
}
⚠️ 注意事项：
- 浏览器支持：Chrome 110+、Firefox 119+、Safari 16.4+ 已原生支持容器查询（需确保启用实验性功能或使用最新稳定版）；
-
容器类型必须明确：
container-type: inline-size（宽度）或size（宽高），不可省略； -
避免嵌套过深：容器查询仅向上查找最近的、设置了
container-type的祖先，不跨层级继承； -
grid-gap已被标准弃用，请统一使用gap； - 若
.wrapper本身宽度受外部限制（如max-width或 flex 约束），请确保其能真实反映内部内容所需容器尺寸。
总结：容器查询不是“给谁查”，而是“从谁查起”。只有当 .list 的父级（.wrapper）被明确定义为容器，@container (max-width: 500px) 才能准确监听该容器的内联尺寸变化，并驱动 .list 的 grid-template-columns 动态重构——这是构建真正独立、自适应 UI 组件的基石实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
