必须同时设置 container-type 和 contain: size 才能触发 @container 查询，漏掉任一属性则静默失效；css 变量不可用于查询条件，仅限命中后样式中使用；容器尺寸稳定是前提，flex/grid 子项需注意 min-width: 0 等修复。
container-type 和 contain 必须同时设置才能触发查询
只写 @container 规则，浏览器根本不会评估任何条件。必须在容器元素上显式声明两个关键 CSS 属性：container-type: inline-size（最常用）和 contain: size。漏掉任意一个，查询就静默失效——控制台不报错，也不生效。
常见错误包括：
- 只设
container-name: card，没配container-type→ 完全不触发 - 用
contain: content替代contain: size→ 尺寸不可测，查询无从谈起 - 容器是
display: flex或display: grid的直接子项 → 子项宽度由布局算法动态分配，不是稳定可测的“容器尺寸”
推荐写法：contain: layout style size，既能隔离尺寸计算，又避免子元素意外撑破容器导致宽度误判。
CSS 变量不能直接用于 @container 条件判断
@container 的括号内不支持变量插值，比如 @container (min-width: var(--breakpoint-sm)) 是无效语法。CSS 变量只能用在查询**命中后**的样式声明里，不能参与查询条件本身的计算。
但你可以用变量提升可维护性：
- 把断点值统一定义在 :root 下：
:root { --card-min-wide: 480px; --card-min-full: 640px; } - 在
@container中硬编码数值，但用注释关联变量：@container (min-width: 480px) { /* matches --card-min-wide */ ... } - 配合 JS 动态切换 class 或自定义属性，再用属性选择器联动：
.card[style*="--mode:detail"]，此时变量实际作用于 DOM 状态而非查询逻辑
容器尺寸不稳定是查询不触发的主因
写了 @container (min-width: 400px) 却没反应？大概率是容器宽度根本测不出来。Flex/Grid 布局中尤其容易踩坑：
- Flex 子项默认有
min-width: auto，会阻止收缩 → 加min-width: 0或width: fit-content - 容器宽高来自
flex: 1或grid-column: 1 / -1，但父级没设尺寸 → 浏览器无法确定“可查询的尺寸” - 用了
float、position: absolute或display: inline→ 破坏布局上下文，container-type静默失效
真正难的不是写 @container，而是让容器“可测”——它要求你对 Flex/Grid 的尺寸传播机制、contain 的隔离边界、以及 DOM 结构约束有清晰判断。
命名容器（container-name）提升可读性但非必需
未命名时，@container 默认匹配最近的合格容器（即同时满足 container-type 和 contain: size 的祖先）。命名主要用于多层嵌套或避免歧义：
- 给容器加
container-name: card，然后写@container card (min-width: 400px) - 多个同类型容器共存时，命名能精准锁定目标，比如仪表盘里区分
stat-card和chart-container - 注意：命名只是字符串标识，不改变查询行为；也不影响性能，纯语义增强
一个没加 contain: size 的容器，哪怕尺寸再稳定，@container 也永远不工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
