@container规则生效的前提是父容器显式声明container-type: inline-size；否则规则被静默忽略，且不报错。
直接写 @container 规则不会生效——父容器必须显式声明 container-type: inline-size，否则浏览器根本不知道该监听谁的宽度。
父容器没设 container-type，@container 就是死代码
这不是语法错误，也不会报错，但整条 @container 规则会被浏览器静默忽略。常见现象是：写了 @container (min-width: 400px) { .item { flex: 2; } }，但样式始终不切换。
- 必须在父元素上加
container-type: inline-size（推荐），或container-type: size（慎用） - 别指望
div、section默认就是容器——它们只是普通块级元素，没声明就不是容器 - 不能设在
body或:root上，这些节点默认不构成格式化上下文，绝大多数浏览器下无效 - 避免设在
display: inline、position: absolute、float或display: contents的元素上，尺寸不可测
@container 里不能直接改 CSS 变量，得靠选择器落地
@container 是条件规则，不是作用域，它本身不提供变量声明能力。你不能写 @container (min-width: 500px) { --gap: 24px; }，这行不通。
- 正确做法是：在
@container内通过具体选择器设置变量，例如@container (min-width: 500px) { .card { --card-gap: 24px; } } - 变量最终生效依赖于目标元素是否实际使用了
var(--card-gap)，且该元素在 DOM 中处于已启用container-type的祖先之下 - 命名容器（如
container: card / inline-size）可提升可读性，但非必需；未命名时直接用@container (min-width: ...)即可匹配最近合格容器
断点单位只认 px、%、vw，别用 em 或 rem
容器查询的尺寸判断基于内容区可用宽度（inline-size available space），单位支持非常有限。用错单位会导致断点完全不触发。
- 只支持：
px（最稳）、%（需父容器有明确宽度）、vw（按视口算，但语义已偏离容器查询本意） - 不支持：
em、rem、ch、calc()、vh、百分比若父容器无宽则无效 -
min-width: 400px判断的是 content box 宽度 ≥ 400px，不是元素的offsetWidth；如果容器有padding: 16px和box-sizing: border-box，那它的样式width至少得是432px才能触发
真正卡住人的从来不是 @container 语法，而是让那个父容器“可测”——它要求你清楚 flex 子项的 min-width: auto 会锁死收缩、grid 轨道没尺寸约束时容器宽度为 0、contain 层级没配对就会泄漏干扰。这些细节一错，查询就永远等不到第一次触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
