@container 规则需显式声明 container-type 才生效，推荐用 inline-size 或 size，并配合 container-name 避免嵌套冲突；变量需在 @container 内重定义且必须设 fallback，断点用 px/em 且避免重叠；vw/% 等单位无效，旧浏览器完全忽略该特性。
container-type 必须显式声明，否则 @container 无效
浏览器不会自动把任何元素当容器——没写 container-type: inline-size，@container 规则就完全不生效，控制台也不会报错，只会静默跳过。常见做法是给组件最外层加这一行：
-
.card { container-type: inline-size; }（查宽度）或container-type: size;（查宽高变化） - 如果组件嵌套（比如卡片里还有标签云），建议同时用
container-name: card命名，避免规则命中错误层级 - 简写语法
container: card / inline-size;也可用，但兼容性略低于分开写
var() 不会响应容器尺寸变化，必须在 @container 内重定义变量
var(--size) 是静态求值的，写 --size: clamp(1rem, 3cqw, 1.5rem) 会被浏览器忽略（cqw 只能在 @container 内部直接用于属性值，不能进变量）。真要实现“随容器变”，得靠离散断点 + 局部重赋值：
- 先在组件内设 fallback：
.card h2 { font-size: var(--title-size, 1.1rem); } - 在
@container块里覆盖变量：@container (min-width: 401px) { .card h2 { --title-size: 1.25rem; } } - 断点值别重叠，比如用
401px和601px，而不是400px和600px，否则边界处可能因渲染精度闪烁
fallback 值不是可选的，而是作用域安全的关键
var(--x, fallback) 的 fallback 不只是兜底——它确保变量未被任何 @container 覆盖时仍有可用值。如果不写 fallback，而父级又没定义 --x，结果就是 unset，字体、间距等属性会退回到浏览器默认值，布局容易崩。
- 变量名必须一致，且使用前至少声明一次（哪怕只在
:root里设个空值） - 变量作用域是当前选择器及其后代，
@container内的重定义不会污染全局 - 旧浏览器（IE、旧 Safari）完全忽略
@container，所以 fallback 是唯一能保证基础样式的防线
容器查询单位只能用 px/em/rem，不能用 vw/%
容器查询的尺寸基于容器自身，不是视口。写 @container (min-width: 30vw) 或 (width: 50%) 会被解析为无效规则，浏览器直接跳过整条 @container 块。
- 断点推荐用
px（语义明确）或em（适配字体缩放） - 多条件用空格连接：
@container (min-width: 400px) and (max-width: 600px) - 不要试图在变量里塞计算表达式，目前所有浏览器都不支持
calc()或clamp()在@container外部动态响应容器尺寸
@container 是开关，container-type 是钥匙，fallback 是保险丝。三者缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
