css变量本身不响应，响应式靠@media中对:root同名变量的覆盖；--spacing-unit在手机上没变主因是定义顺序错或作用域窄；var()需配合calc()运算且变量须带单位；js切换暗色模式要先设默认值并避免与媒体查询冲突。
直接说结论：CSS变量本身不响应，响应式靠的是在不同 @media 块里对 :root 中同名变量的覆盖，不是“让变量动起来”，而是“在不同断点下给它赋不同的值”。
为什么--spacing-unit在手机上没变？
最常见原因是变量定义位置或层叠顺序不对。浏览器按 CSS 规则流解析，后写的同名变量才生效。
- 确保所有
@media块都写在:root定义之后（不能反过来） - 别把变量写在
body或某个 class 里——body { --spacing-unit: 8px; }只在 body 下作用域生效，子元素读不到 - 移动端优先写法更稳：
:root { --spacing-unit: 0.5rem; }，再用@media (min-width: 769px) { :root { --spacing-unit: 1rem; } } - 检查是否被其他样式覆盖：比如
.card { padding: 16px; padding: var(--spacing-unit); }，第二行会被第一行压掉
var(--gap) 和 calc() 搭配出错怎么办？
自定义属性不能直接参与运算，var(--gap) * 2 是非法语法，必须套 calc()。
- 正确写法：
width: calc(var(--gap) * 2); - 但前提是
--gap本身带单位，比如--gap: 1rem;，不能是--gap: 1; - 如果变量是纯数字（如用于比例），得配合
calc()转成带单位值：--scale: 1.2;→font-size: calc(1rem * var(--scale)); - 避免在 PostCSS 环境中启用
postcss-custom-properties的静态替换，它会提前把var()替换成固定值，破坏响应逻辑
如何安全地用 JS 切换暗色模式变量？
JS 写入变量会绕过 @media (prefers-color-scheme: dark) 的自动逻辑，容易冲突。
- 务必先在
:root设默认值：--bg: #fff; --text: #000;，否则未匹配媒体查询时变量为unset，页面可能白屏或文字不可见 - 不要只改部分变量：设了
--bg却漏掉--border，暗色下边框就没了 - 平滑过渡靠属性本身加
transition，不是变量：background-color: var(--bg); transition: background-color 0.2s; - 监听系统变化用
window.matchMedia('(prefers-color-scheme: dark)')，别依赖 JS 主动轮询
真正难的不是怎么写，而是变量命名是否语义清晰、覆盖逻辑是否可预测、以及是否意识到 JS 动态写入和媒体查询之间存在隐式优先级竞争——这点最容易在主题切换时翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
