css变量不会随@container自动更新，因其为静态声明；必须在每个断点内显式重定义变量并设container-type: inline-size，且fallback不可省略。
必须在 @container 规则内部重新赋值变量，不能指望变量“自动响应”容器尺寸变化。
为什么var(--color)不会随容器缩放自动更新
CSS 变量是静态声明的，浏览器在解析时就确定其值；@container 只控制整块样式规则的启用/禁用，不触发变量重计算。写 --text-color: #007bff 在 :root 里，再写 @container (min-width: 400px) { color: var(--text-color) } —— 这个 color 值不会变，因为变量没被重设。
-
@container不是监听器，它没有运行时条件判断能力（比如没有if(width > 400px, #007bff, #333)这种语法） - 变量作用域是声明处及其后代，
@container外部定义的变量不会被“注入”进查询上下文 - 漏掉
container-type: inline-size，整个@container块静默失效，连报错都没有
@container 内必须显式重定义变量
正确做法是在每个断点内，对容器元素本身设置新变量值，再由子元素通过 var() 消费。变量名要一致，且使用时必须带 fallback。
- 容器需声明
container-type: inline-size（size仅对<img>等替换元素有效） - 变量应设在容器选择器上，例如
.card { --title-size: 1.25rem; }，而非:root - 子元素写
font-size: var(--title-size, 1.1rem)，fallback 是必须的，否则未命中任何断点时会回退到unset - 断点值避免紧邻，比如用
401px和601px，而不是400px和401px，防止渲染精度导致闪烁
.card { container-type: inline-size; }
.card h2 { font-size: var(--title-size, 1.1rem); }
@container (min-width: 401px) {
.card { --title-size: 1.25rem; }
}
@container (min-width: 601px) {
.card { --title-size: 1.4rem; }
}
别把 cqw 或 clamp() 往变量里塞
cqw（容器查询宽度单位）只能直接用于长度属性（如 font-size: 3cqw），不能赋值给 CSS 变量；clamp() 在变量声明中会被当作固定值求值，无法响应容器变化。
- 写
--size: clamp(1rem, 3cqw, 1.5rem)→ 浏览器静默忽略整行，var(--size)回退到 fallback - 写
--size: 2cqw→ 同样被忽略，不是兼容性问题，是规范禁止 - 想平滑缩放？靠离散断点 + 合理间隔（如 320/480/640px），别幻想“连续响应”
- 如果真需要动态缩放，JS 测容器宽 +
style.setProperty()注入变量更可控
最易被忽略的是：变量必须从容器作用域“透传”出去，而容器本身必须建立 BFC（比如不能是 display: contents 或 inline 元素），否则变量继承链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
