@container规则生效的前提是父元素显式声明container-type: inline-size，否则整条规则被静默忽略；断点单位仅支持px和%，em/rem/vh/calc()等无效；css变量需通过选择器设置而非直接声明。
@container 规则本身不会生效，除非父元素显式声明 container-type: inline-size——这是最常被跳过的一步，也是 90% 的“没反应”问题的根源。
为什么写了 @container 却完全不触发？
浏览器根本不会把普通 div 当作可查询容器。它只认显式声明了 container-type 的元素，且该元素必须能产生可测量的 inline-size（即内容方向上的可用宽度）。
- 父元素没设
container-type，或设成了normal→ 整条@container被静默忽略，控制台零提示 - 父元素是
display: contents、display: none或position: absolute→ 不构成容器边界，尺寸不可测 - 父元素宽度由内容撑开（如
width: max-content），又没子项占位 → 计算出的可用宽度为0px，断点永远不满足 - 在
body或:root上设container-type→ 多数浏览器不支持，因它们默认不建立容器格式化上下文
@container 断点单位只能用 px、%，别碰 em/rem
容器查询的 min-width 是基于父容器的内容区可用宽度（inline-size available space）计算的，单位支持极有限。用错单位，断点就彻底失效。
- ✅ 安全：
px（最稳）、%（仅当父容器有明确width或受约束时有效） - ❌ 无效：
em、rem、vh、calc()—— 这些会退化为视口基准，失去“响应父容器”的语义 - ⚠️ 慎用：
vw（按视口算，逻辑上已偏离容器查询本意） - 注意：
min-width: 400px判断的是 content box 宽度 ≥ 400px；若父容器有padding: 16px且box-sizing: border-box，那它的样式width至少得是432px才能触发
@container 里不能直接改 CSS 变量，得靠选择器落地
@container 是条件规则，不是作用域。它不提供变量声明能力，也不能嵌套 @media 或其他 at-rule。
- ❌ 错误写法：
@container (min-width: 500px) { --gap: 24px; }→ 语法合法但无效果 - ✅ 正确写法：
@container (min-width: 500px) { .card { --card-gap: 24px; } }→ 变量只对匹配的选择器生效 - 变量最终起效，还依赖两个前提：目标元素实际用了
var(--card-gap)，且该元素位于已启用container-type的祖先 DOM 路径下 - 命名容器更可控：
.sidebar { container-name: sidebar; container-type: inline-size; }+@container sidebar (min-width: 320px)，避免多容器场景下的误匹配
真正卡住人的从来不是 @container 语法，而是让那个父容器“可测”——它要求你清楚 flex 子项的 min-width: auto 会锁死收缩、grid 轨道没尺寸约束时容器宽度为 0、contain 层级没配对就会泄漏干扰。这些细节一错，查询就永远等不到第一次触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
