必须为容器设置 container-type: inline-size 和 contain: size，变量才随容器尺寸响应变化；@container 仅启用规则，需在块内重设变量并提供 fallback，否则 var() 失效。
必须在容器上设 container-type: inline-size，再用 @container 重定义变量，否则变量不会随容器尺寸变化。
为什么直接写 var(--color) 不会响应容器缩放
CSS 变量是静态值，声明时就确定了，不监听任何尺寸变化。浏览器也没有运行时条件语法（比如没有 color: if(width > 400px, red, blue)）。@container 的作用只是启用或禁用一整块样式规则，它本身不“计算”变量，只负责让规则生效。
常见错误是这样写：
.card h2 { color: var(--text-color); }
@container (min-width: 400px) { .card h2 { color: #007bff; } }
这虽然能变色，但无法复用、难维护，且颜色逻辑和选择器耦合太紧。
立即学习“前端免费学习笔记（深入）”；
- 变量必须在
@container块内重新赋值，比如--text-color: #007bff; - 使用处必须有 fallback：
color: var(--text-color, #333);，否则未命中任何断点时会失效 - 变量作用域只在当前选择器及其后代生效，不是全局覆盖
@container 内怎么安全地更新字体大小变量
目标是让标题字号随父容器宽度分段调整：窄容器用 1.1rem，中等用 1.25rem，宽容器用 1.4rem。关键在断点设计和 fallback。
.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; } }
- 断点值要错开（
401px而非400px），避免边界渲染精度导致闪烁 - 不能用
clamp(1rem, 5cqw, 1.5rem)赋值给变量——cqw只能在@container内部的属性值里直接使用，不能进变量声明 - 变量名必须一致，且使用前至少要有 fallback 值，否则
var(--title-size)会退为unset
容器必须加 contain: size，否则查询永远不触发
只写 container-type: inline-size 是不够的。浏览器需要尺寸隔离才能稳定测量容器宽度，否则 @container 规则会被完全忽略。
- 最低要求是
contain: size；推荐写contain: layout style size，防止子元素撑破容器 -
contain: content不行，它不包含尺寸隔离能力 - 如果容器是
display: inline、float或position: absolute，布局上下文断裂，container-type也无效 - 验证是否生效：DevTools → Elements → 选中容器 → Computed 标签页看是否有
container-type: inline-size
颜色主题切换最容易漏掉的两件事
想让卡片背景和文字色随容器宽度切换深浅模式，很多人只记得写变量，却忽略了作用域透传和命名冲突。
- 变量必须定义在容器自身（如
.card { --bg: #f0f0f0; }），不能只写在:root或外层 wrapper，否则子元素继承不到 - 别在多个
@container块里用不同名变量（比如一个写--bg-light，另一个写--bg-dark），消费时得写两套var()，违背变量初衷 - 如果容器外层是
display: contents或display: none，容器上下文会断裂，@container失效
真正卡住人的往往不是语法，而是容器尺寸测不出来——flex 子项默认 min-width: auto、grid 列没设明确范围、父级没宽高等，都会让 inline-size 查不到有效值。
