不能在@media中用var(--breakpoint)写断点条件，因CSS规范禁止变量参与媒体查询计算，整条规则会被静默忽略；正确做法是用字面量（如768px）定义断点，在匹配块内重设:root变量值。
不能在 @media 里用 var(--breakpoint) 写断点条件，但可以在匹配的 @media 块内安全重写 :root 上的变量值——只要变量名一致、作用域正确、单位兼容。
为什么 @media (min-width: var(--sm)) 会静默失效
CSS 规范明确禁止变量参与媒体查询条件计算。浏览器看到这种写法，整条 @media 规则会被直接忽略，不报错、不警告，也不触发任何样式更新。你改了 --sm 的值，但断点本身根本没注册成功。
- 断点必须用字面量：比如
768px、40em，不能是变量引用 - 变量只能用于“被应用的位置”，不能用于“判断是否应用”的位置
- 想动态控制断点？得靠 JS 注入新
@media规则，或预设多套变量 + 切换类名
在 @media 中重设 :root 变量的正确写法
真正起效的方式是：用字面量写断点，再在该块内对 :root 重设变量值。所有重定义必须放在同一作用域（推荐统一写在 :root 下），避免分散到不同选择器中导致覆盖混乱。
-
:root必须先定义初始值，否则未匹配任何媒体查询时变量为unset - 变量名必须完全一致，
--spacing和--pad是两个独立变量 - 不要依赖“上一个断点留下的值”——每个
@media块独立匹配，未声明即回退到:root初始值 - 移动端常用
--padding: 0.75rem，PC 端用--padding: 1.25rem，差值建议 ≤ 0.5rem 避免视觉跳跃
重写后样式没更新？检查这三处
变量值变了，但元素没重绘，通常不是变量问题，而是引用链断了。
立即学习“前端免费学习笔记（深入）”；
- 元素样式没显式写
padding: var(--spacing)，而是写了固定值如padding: 1rem—— 改变量毫无影响 - 变量定义在局部（如
.card { --spacing: 1rem; }），而@media却去改:root—— 作用域不重叠，改了也白改 - 某处用了
font-size: 1.25rem !important，它会压制font-size: var(--font-size-base)，哪怕变量值变了也没用
最易被忽略的一点：IE 和旧版 Safari 对 calc(var(--x) * 2) 这类嵌套支持不稳定，若需兼容，优先用媒体查询直接重设变量，而非在 CSS 中做复杂计算。
