容器查询（@container）要求目标元素的祖先中必须存在明确声明 container-type 的容器，否则媒体查询不会触发；常见错误是直接在待响应的元素上设置 container-type，而未提供有效的容器上下文。
容器查询（@container）要求目标元素的祖先中必须存在明确声明 container-type 的容器，否则媒体查询不会触发；常见错误是直接在待响应的元素上设置 container-type，而未提供有效的容器上下文。
容器查询（Container Queries）是 CSS 响应式设计的重要演进，它允许样式根据父容器尺寸而非整个视口（viewport）动态调整。但其生效有严格前提：必须存在一个显式声明 container-type 的祖先容器，且被查询的样式规则需作用于该容器的后代元素。
在原始代码中，.list 元素自身设置了 container-type: inline-size，却试图在 @container 规则中控制自身属性（如 grid-template-columns）。这是无效的——容器查询不能查询自身，只能由其祖先容器触发，并作用于其后代元素。
✅ 正确做法是：引入一个专用包装容器（wrapper），为其设置 container-type: inline-size，再将 .list 作为其子元素。这样，@container (max-width: 500px) 才能基于 .wrapper 的实际内联尺寸（即宽度）进行判断，并安全地修改 .list 和 .letter 的样式。
以下是修正后的完整示例：
<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 {
container-type: inline-size; /* ✅ 关键：祖先容器声明类型 */
}
.list {
background-color: grey;
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; /* 可选：保持正方形，增强可读性 */
}
@container (max-width: 500px) {
.list {
grid-template-columns: repeat(2, 1fr); /* ✅ 此时生效 */
}
.letter {
background-color: green;
}
}
⚠️ 注意事项：
-
浏览器支持：Chrome 105+、Firefox 110+（需启用
layout.css.container-queries.enabled标志）、Safari 16.4+ 已原生支持。请确保使用最新稳定版并检查兼容性。 -
container-name可选但推荐：若页面存在多个容器，建议配合container-name: list-container显式命名，避免查询冲突：.wrapper { container-type: inline-size; container-name: list-container; } @container list-container (max-width: 500px) { /* 更精准匹配 */ } -
不要滥用嵌套容器：仅在真正需要“组件级响应”时使用容器查询；全局布局仍优先使用传统媒体查询（
@media）。
总结：容器查询不是“给谁加就查谁”，而是“由谁定容器，就查谁的后代”。牢记「容器 → 后代 → 查询」三层关系，即可避免 90% 的常见失效问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
