应在 :root 中用语义化前缀分离断点（如 --breakpoint-sm: 576px）与主题色（如 --color-primary: #0d6efd），断点需带单位，主题色避免无意义缩写；媒体查询中慎用 var() 控制断点，推荐硬编码断点值并仅用变量管理颜色；JS 不应动态修改断点变量，仅用于更新主题色；多主题通过 class 切换并只覆盖差异变量，注意继承与局部作用域影响。
如何在 :root 中统一定义断点与主题色变量
直接把断点和颜色都塞进 :root 是最简路径，但必须区分语义层级——断点是“布局维度”，主题色是“视觉维度”，混在一起会增加维护成本。推荐用命名前缀隔离：
-
--breakpoint-sm、--breakpoint-md、--breakpoint-lg用于媒体查询值（单位必须带px或em） -
--color-primary、--color-bg-surface、--color-text-emphasis等用于颜色，避免用--c1这类无意义缩写 - 所有变量值需可被
@media和var()直接消费，所以断点变量不能写成768（缺单位），得是768px
示例：
:root {
/* 断点 */
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
<p>/<em> 主题色 </em>/
--color-primary: #0d6efd;
--color-bg-surface: #ffffff;
--color-text-emphasis: #212529;
}用 @media + var() 实现响应式主题切换
CSS 变量本身不触发媒体查询，但你可以在不同媒体查询块里重新赋值——这比写两套完整样式更轻量，也避免重复声明选择器。
- 暗色模式 + 小屏设备叠加时，
@media (prefers-color-scheme: dark) and (max-width: var(--breakpoint-md))是合法写法，但注意：部分旧版 Safari 不支持var()在@media中 - 更稳妥的做法是把断点值硬编码在媒体查询中，只用变量管理颜色：
@media (max-width: 768px)内覆盖--color-bg-surface，而非依赖var(--breakpoint-md) - 如果真要用变量控制断点逻辑，建议只在现代浏览器环境（Chrome 110+、Firefox 115+、Safari 16.4+）中启用，其他环境 fallback 到固定断点
常见错误：@media (min-width: var(--breakpoint-lg)) 在 Safari 15.6 及更早版本会直接忽略整条规则，不报错也不生效。
立即学习“前端免费学习笔记（深入）”；
JavaScript 动态更新断点变量的风险点
断点变量不该由 JS 动态设置——它本质是设计约束，不是运行时状态。JS 改 --breakpoint-md 不会触发重排或媒体查询重计算，纯属无效操作。
- 真正该用 JS 控制的是主题色变量，比如
document.documentElement.style.setProperty('--color-primary', '#dc3545') - 如果业务需要“用户自定义断点”（极少见），应通过 JS 添加/移除 class，再用 CSS 类驱动布局变化，而不是改变量
- 误将断点当主题色管理，会导致调试时发现
getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-md')值变了，但页面毫无反应
多主题共存时变量作用域怎么不串？
多个主题（如 light/dark/high-contrast）共存，靠 class 切换是最稳的方案，但要注意变量覆盖顺序和继承链。
- 不要在
.theme-dark里重复定义所有变量，只覆盖差异项：.theme-dark { --color-bg-surface: #121212; --color-text-emphasis: #e0e0e0; } - 确保
.theme-dark应用在html或body上，否则子元素无法继承新值（CSS 变量靠继承，不是级联） - scoped 样式（如 Vue 的
<style scoped></style>）不影响变量读取，但若组件内又定义了同名局部变量（如.card { --color-primary: #6f42c1; }），就会覆盖全局值——这是有意为之的局部定制，不是 bug
最容易被忽略的是：当你用 JS 切换主题 class 后，某些已渲染的组件可能缓存了旧的 computedStyle，尤其在使用 getBoundingClientRect() 或动画库时，需手动触发重绘（例如 el.style.transform = 'translateZ(0)'）。
