容器查询不能用CSS自定义属性写断点，因@container仅支持静态尺寸值；但可借自定义属性作状态开关，在查询命中后驱动样式变化，如用--is-wide控制font-size过渡。
容器查询本身不能用 CSS 自定义属性写断点，但自定义属性可以作为“状态开关”或“动态值载体”在查询命中后驱动样式变化——这是最实用、最可控的配合方式。
为什么不能在 @container 条件里用 var(--breakpoint)
因为 @container 的括号内只接受静态尺寸值（如 min-width: 400px），不支持任何计算或变量插值。写成 @container (min-width: var(--sm)) 是无效语法，浏览器直接忽略整条规则，控制台也不报错。
- 断点必须是明确的
px、em或rem，不支持vw、%、calc()，更不支持var() - 你可以把变量定义在
:root里用于维护，但@container中仍得硬编码数值，并加注释对齐：/* matches --card-min-wide */ - 如果真需要 JS 动态控制断点，只能切换 class 或修改容器的
style属性，再用属性选择器替代@container——但这已脱离容器查询本意
怎么用自定义属性承接查询结果并驱动动画/渐变
核心思路是：用 @container 控制一个布尔型自定义属性（如 --is-wide: 1），再让目标元素的样式通过 calc()、color-mix() 或 transition 响应这个变量变化。
- 在容器上设置：
.card-wrapper { container-type: inline-size; --is-wide: 0; } - 在
@container中更新变量：@container card-wrapper (min-width: 480px) { .card-wrapper { --is-wide: 1; } } - 子元素用该变量做过渡基础：
.card-title { font-size: calc(1rem + var(--is-wide) * 0.5rem); transition: font-size 0.3s ease; } - 注意：变量本身不可过渡，但参与计算的属性（如
font-size）可以过渡；var(--is-wide)是 0 或 1，乘法让它变成可线性变化的系数
哪些地方容易漏掉导致自定义属性失效
常见静默失败不是语法错，而是容器没真正“被测出尺寸”——这时 @container 根本不触发，后续所有变量赋值都白搭。
立即学习“前端免费学习笔记（深入）”；
- 容器必须同时有
container-type: inline-size和contain: size（或contain: layout style size），漏任一就静默失效 - 如果容器是
flex或grid的直接子项，且没设min-width: 0，它的宽度可能被算法压缩为 0，查不到有效尺寸 - 自定义属性写在伪类（如
:hover）或媒体查询里，但没同步写进@container块中，会导致查询命中时变量没更新 - 用
getComputedStyle(el).getPropertyValue('--is-wide')检查时，返回的是初始值（如"0"），不代表查询未生效——它只反映当前计算值，不反映“是否曾被改过”
真正难的不是写法，而是确认容器尺寸是否稳定可测。哪怕所有 CSS 都写对了，只要容器宽度在布局阶段算出来是 auto 或 0，@container 就永远不会运行，后面所有自定义属性操作都只是空转。
