css变量不能用于@media条件，因媒体查询匹配早于变量求值；唯一合法方式是在@media块内对:root显式重设变量值。
为什么直接在 @media 里定义 CSS 变量会失效
很多人写完 :root { --gap: 1rem; }，再在媒体查询里覆盖 @media (min-width: 768px) { :root { --gap: 1.5rem; } }，却发现组件没响应——根本原因是 :root 选择器在媒体查询内**不会重计算级联值**，浏览器只会在初始渲染时读取一次 :root 的变量声明，后续媒体查询里的同名变量被忽略。
正确做法是把变量声明放在具体选择器里，或者用更可靠的注入时机。实际中推荐两种稳定路径：
- 变量定义写在顶层
:root，但所有使用变量的属性（如padding、font-size）必须显式写进对应媒体查询块内 - 改用
html[data-breakpoint="md"]这类运行时切换的属性 + 属性选择器，配合 JS 控制，避免依赖媒体查询的变量重载
calc() 配合 CSS 变量做流体缩放时的单位陷阱
想实现字号随视口平滑变化？别直接写 --fs: calc(1rem + 0.25vw); 然后在 font-size: var(--fs); ——多数浏览器不支持 calc() 在自定义属性值里嵌套单位混合运算（尤其 Safari 旧版本会静默失败）。
可行方案是把计算逻辑“外推”到使用处：
- 保留
:root { --base: 1; --scale: 0.25; } - 在媒体查询或元素上写
font-size: calc(var(--base) * 1rem + var(--scale) * 1vw); - 需要多档断点时，用不同变量名隔离，比如
--fs-sm、--fs-md，再配合@media分别赋值
这样既保持变量可维护性，又绕开 calc() 在 var() 内部的兼容性雷区。
用 prefers-reduced-motion 和变量联动时的重绘风险
当用 @media (prefers-reduced-motion: reduce) 动态切换 --animation-duration，容易忽略：变量本身不触发重绘，只有依赖它的属性（如 transition-duration）才会响应。如果只改变量，但没在对应选择器里重新声明该属性，动画限制就形同虚设。
典型错误写法：
:root {
--animation-duration: 0.3s;
}
@media (prefers-reduced-motion: reduce) {
:root { --animation-duration: 0.01s; }
}
/* ❌ 没有在这里重新设置 transition-duration，变量改了也没用 */
正确写法是绑定到具体组件：
.card {
transition-duration: var(--animation-duration);
}
@media (prefers-reduced-motion: reduce) {
.card {
transition-duration: var(--animation-duration);
}
}
变量只是数据容器，CSS 的响应式行为始终由属性声明的位置和时机决定。
JS 动态更新 CSS 变量后，为何某些样式没刷新？
执行 document.documentElement.style.setProperty('--color-primary', '#333'); 后，部分元素颜色不变——大概率是因为这些元素的样式规则里用了 color: var(--color-primary, #000);，而 var() 的 fallback 值被缓存了，或者该元素本身有更高优先级的内联样式/important 声明覆盖。
排查要点：
- 打开 DevTools → Elements → 查看目标元素 computed 样式，确认
color是否真的解析为新变量值 - 检查是否误用了
!important在变量调用处（如color: var(--c) !important;），这会导致 JS 设置的变量无法覆盖 - 若变量用于
background或border等复合属性，注意有些浏览器对var()解析失败时会整条声明丢弃，而非降级到 fallback
变量不是魔法，它只是 CSS 层的“占位符”，最终生效仍取决于选择器权重、声明顺序和浏览器对 var() 的解析完整性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
