纯 CSS 变量可实现免 JS 响应式主题与尺寸切换：通过 :root 与 @media(prefers-color-scheme) 自动适配系统偏好；用 [data-theme] 属性覆盖实现用户手动控制；结合 calc() 和媒体查询重定义基础变量达成响应式尺寸；避免实验性 if() 函数确保兼容性。
纯 CSS 变量就能实现响应式主题 + 尺寸切换，不需要 JavaScript 也能自动适配系统偏好，但手动控制和精细响应必须靠变量作用域叠加与合理触发机制。
用 :root + @media (prefers-color-scheme) 实现免 JS 主题自动切换
这是最轻量、最可靠的基础层：浏览器根据系统设置自动应用深色/浅色变量，无需监听或存储逻辑。
-
:root中定义默认（浅色）变量，@media (prefers-color-scheme: dark)内重写同名变量即可 - 媒体查询必须写在
:root规则内部或之后，否则变量不会被覆盖（CSS 层叠顺序决定） - 变量名要严格一致，比如
--bg-color在两个上下文中都得是同一字符串，拼错一个字母就失效 - 过渡效果必须加在具体属性上（如
background-color），不能只写transition: all—— 否则部分浏览器会跳过自定义属性变化的动画
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
用 data-theme 属性实现用户主动切换与优先级控制
系统偏好只是起点，用户手动选择应具有更高优先级。用 data-theme 属性配合选择器提升权重，能覆盖媒体查询结果。
- 不要用
.dark类加在body上，而要用[data-theme="dark"]加在:root或html上——这样变量作用域更干净，避免后代选择器权重干扰 -
[data-theme="dark"]的优先级高于@media中的:root，所以它能真正“接管”主题控制权 - 切换时只需改
document.documentElement.dataset.theme，比操作 class 更语义化、更少副作用 - 记得在页面加载时读取
localStorage并设置初始值，否则刷新后退回到系统偏好
:root {
--bg-color: #ffffff;
}
[data-theme="dark"] {
--bg-color: #1a1a1a;
}
/* 这条规则生效，即使系统是 light 模式 */
用嵌套变量 + calc() 实现响应式尺寸系统
CSS 变量本身不响应视口，但可以和 calc()、clamp() 或媒体查询里的变量重定义组合，构建真正可伸缩的间距、字体、圆角等。
- 别把所有尺寸都写死成像素，例如
--space-base: 8px是起点，再定义--space-md: calc(var(--space-base) * 2) - 在不同断点里重设
--space-base，所有依赖它的尺寸会自动按比例调整 - 对字体大小，推荐用
clamp(1rem, 4vw, 1.5rem)配合变量，比如font-size: clamp(var(--min-font), 4vw, var(--max-font)) - 注意
calc()里不能直接写var(--x) * var(--y)，必须至少有一个是数字或带单位值，否则解析失败
:root {
--space-base: 8px;
--space-md: calc(var(--space-base) * 2);
}
@media (min-width: 768px) {
:root {
--space-base: 12px;
}
}
.card {
padding: var(--space-md);
}
避免 if() 函数在生产环境过早依赖
if() 看起来能在一个属性里写完条件逻辑，但截至 2026 年 10 月，它仍处于实验阶段：Chrome 128+ 支持，Firefox 和 Safari 尚未稳定启用，且不支持嵌套或复杂表达式。
- 目前用
if(media(...))做简单背景色切换可以验证概念，但不能替代传统媒体查询做真实项目 - 它不改变变量值，只影响单个属性输出，无法像
:root变量重定义那样驱动整套 UI 状态 - 如果误用，构建工具或旧版浏览器会直接忽略整个属性，导致样式丢失，且无降级提示
- 真要动态判断，请坚持用变量 + JS 切换 + CSS 层叠，这是当前唯一全兼容路径
最易被忽略的是变量命名一致性与作用域污染：一个项目里 --color-primary 和 --primary-color 并存，或者在多个组件里重复定义局部 --spacing 却没隔离作用域，会让后续维护迅速失控。主题不是“换个颜色”，而是整套设计语言的变量映射关系 —— 它必须从第一天就约定好命名、层级和更新契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
