不可行。CSS变量不能在媒体查询中直接重声明，必须写成@media (max-width: 768px) {:root {--color-primary: blue;}}，否则浏览器忽略；:root不可省略，所有响应式变量覆盖都需在此作用域内重赋值。
媒体查询里直接改 :root 变量可行吗？
不行。CSS变量（--color-primary）本身不支持在媒体查询中“重声明”覆盖，除非你显式地在对应断点下重新给 :root 设置一遍。很多人误以为写个 @media (max-width: 768px) { --color-primary: blue; } 就能生效——这语法根本无效，浏览器直接忽略。
- 必须写成
@media (max-width: 768px) { :root { --color-primary: blue; } } -
:root是伪类，不是选择器别名，不能省略；漏掉它，变量不会更新 - 所有响应式变量都得在
:root下重赋值，不能只写变量名
怎么组织多主题变量才不乱？
把基础色、间距、字体这些按语义分组，用统一前缀（比如 --theme-），避免和业务变量混在一起。否则调试时根本分不清哪个是主题变量、哪个是组件临时变量。
- 推荐结构：
--theme-color-bg、--theme-spacing-md、--theme-font-size-base - 不要用
--dark-bg或--mobile-padding这类带状态/设备名的命名，它们会随着需求变化快速过时 - 所有变量初始值写在最外层
:root，媒体查询只负责“覆盖”，不新增变量
为什么改了变量但样式没变？
常见原因是变量使用位置不对：你在 .card { background: var(--theme-color-bg); } 里用了变量，但该 .card 元素本身有内联 style="background: #fff"，或者被更具体的选择器（如 .card.active）覆盖了。
- CSS变量只是值的占位符，不改变层叠顺序；最终生效取决于 CSS 优先级
- 检查 computed styles，确认
var(--theme-color-bg)是否被成功解析为颜色值，而不是回退到initial或unset - 媒体查询生效范围必须包含当前视口宽度，注意
min-width和max-width的边界是否卡在像素临界点上（比如 768px 设备可能实际是 768.5px）
有没有比媒体查询更可控的主题切换方式？
有，但代价是需要 JS 驱动。纯 CSS 媒体查询只能响应视口尺寸或系统偏好（prefers-color-scheme），没法响应用户手动点击“切深色模式”这种操作。
立即学习“前端免费学习笔记（深入）”；
- 如果要支持手动切换，得用 JS 给
或加 class（如class="theme-dark"），再用.theme-dark :root { --theme-color-bg: #1a1a1a; }覆盖 - 媒体查询 + class 切换可以共存，比如先用
prefers-color-scheme: dark设默认，再用 class 覆盖用户选择 - 注意：JS 修改
:root变量需通过document.documentElement.style.setProperty()，直接改style属性不会影响全局:root
