CSS变量不能在@media中直接通过:root声明重设，必须在顶层或选择器内定义；正确做法是用:root配合@media覆盖变量，或用class切换实现更灵活的主题控制。
media query里不能直接定义CSS变量
你没法在 @media 块里用 :root { --color-primary: red; } 动态重设变量——浏览器会忽略这种写法。变量必须在顶层或选择器作用域内声明，media query只是条件包裹器，不改变变量作用域规则。
常见错误现象：Uncaught SyntaxError: Invalid or unexpected token（其实是CSS解析失败，但控制台不报，只表现为颜色没变）；或者变量值始终是初始值，完全不响应断点切换。
- 正确做法：把变量声明放在
:root，然后在不同 media query 里用选择器覆盖它 - 更稳妥的做法：用 class 切换 + :root 变量组合，避免依赖级联顺序
- 注意变量作用域：如果在某个组件内部用
.card { --color-bg: #f0f0f0; }，那 media query 里再改:root的同名变量，对这个组件无效
用:root + @media 组合实现断点配色
这是最常用、兼容性好（Chrome 49+/Firefox 31+/Safari 9.1+）、逻辑清晰的方案。本质是“先声明默认变量，再按断点覆盖”。
使用场景：深色模式适配、移动端精简配色、大屏强调色增强等。
立即学习“前端免费学习笔记（深入）”；
:root {
--color-text: #333;
--color-bg: #fff;
}
@media (max-width: 768px) {
:root {
--color-text: #444;
--color-bg: #f9f9f9;
}
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #e0e0e0;
--color-bg: #121212;
}
}
性能影响极小——变量计算是CSS引擎一次性完成的，不会因断点切换反复重算。但要注意：多个 media query 重叠时（比如同时满足 max-width 和 prefers-color-scheme），后声明的会覆盖前声明的，顺序很重要。
用class控制比media query更灵活
当需要手动触发主题（比如用户点按钮切深色）、或服务端渲染首屏需避免FOUC时，纯 media query 不够用。这时候用 class 是更可控的选择。
常见错误现象：页面刚加载时闪一下浅色，再变深色；或者移动端横屏/竖屏切换时颜色没反应（因为 orientation 媒体特性支持差，且不触发变量更新）。
- 给
或加 class，例如class="theme-dark mobile" - 变量写在对应 class 下：
html.theme-dark { --color-bg: #111; } - JS切换时只需操作 class：
document.documentElement.classList.toggle('theme-dark') - 这样 media query 只负责加 class，变量逻辑完全解耦，调试和测试都更稳
var()函数调用时的坑：不支持嵌套计算或fallback回退链
var(--color-bg, #fff) 看似能兜底，但 fallback 里不能再用 var()，也不支持 calc 表达式。一旦变量未定义或拼写错误，就会退到 fallback，而不是继续找上层变量。
容易被忽略的地方：在 media query 中修改变量后，如果某处用了 color: var(--color-text, var(--color-default))，第二个 var() 在 fallback 位置是非法语法，整条声明会被丢弃。
- 确保所有变量都有明确初始值，别依赖“上级定义”
- 避免在 fallback 里写复杂表达式，只放字面量颜色值
- 调试技巧：在 DevTools 里看 computed 样式，确认最终生效的是哪个
--color-xxx值，而不是看 styles 面板里的变量声明行
变量不是魔法，它只是字符串替换。断点配色真正起效的关键，是你让哪个作用域里的哪个变量，在什么时候被哪条规则设成了什么值——其余都是包装。
