CSS变量响应式需三要素：:root定义变量、@media重设变量、组件用var()引用，缺一不可；基础Token设锚点值，组件Token语义化引用，通过缩放系数统一调控。
直接说结论：CSS变量 + 媒体查询本身不能“自动响应屏幕变化”，必须靠 :root 级变量 + @media 覆盖 + 组件内用 var() 引用，三者缺一不可。漏掉任何一环，比如只改变量值但没在媒体查询里重设，或者组件里写死了像素值，整套系统就失效。
为什么不能只靠媒体查询改样式？
媒体查询单独写样式（比如 @media (max-width: 768px) { .text { font-size: 14px; } }）确实能响应，但它和“Token系统”无关——所有尺寸、颜色、间距都得手动重复写，无法统一缩放、无法主题切换、无法被组件继承复用。
真正要的是“一套变量，在不同断点下被重新赋值”，让所有引用它的组件自动跟着变。
- 变量必须定义在
:root下，确保全局可访问 - 媒体查询里只能修改
:root中的变量，不能写具体选择器样式（除非是兜底或覆盖） - 组件中所有尺寸/颜色/间距必须用
var(--xxx)，禁用硬编码值（如16px、#333）
怎么组织两级变量：基础 Token 和组件 Token？
基础 Token 是绝对值锚点（如 --font-size-100: 16px），组件 Token 是语义化引用（如 --text-body-font-size: var(--font-size-100)）。这样改一个基础值，所有组件自动缩放。
立即学习“前端免费学习笔记（深入）”；
关键操作不是在每个媒体查询里重写所有组件变量，而是只调基础 Token 的缩放系数：
- 桌面端：
:root { --font-size-scale: 1; } - 平板端：
@media (min-width: 768px) and (max-width: 1023px) { :root { --font-size-scale: 0.9; } } - 手机端：
@media (max-width: 767px) { :root { --font-size-scale: 0.85; } } - 组件内写：
font-size: calc(var(--font-size-100) * var(--font-size-scale));
比逐个重写 --text-body-font-size 更轻量，也避免遗漏。
媒体查询里改变量，为什么有时不生效？
常见原因就三个：
-
@media规则写在了组件 CSS 文件里，但该文件没被:root所在的全局样式表加载——变量作用域失效，查Computed面板会发现值仍是初始值 - 媒体查询条件冲突，比如同时写了
@media (min-width: 768px)和@media (max-width: 768px)，768px 这个临界点谁赢取决于书写顺序（后写的覆盖前写的） - 用了
rem或em却没同步调整根元素font-size，导致缩放错位；正确做法是只靠变量计算，不要动html { font-size: ... }
调试时打开浏览器 DevTools 的 Styles 面板，直接看 :root 下变量值是否随窗口缩放而改变，比猜更准。
响应式 Token 最容易被忽略的细节
不是断点怎么设，而是“缩放逻辑要不要叠加”。比如深色模式 + 小屏设备，你希望字体再小 5%，就不能只写 @media (prefers-color-scheme: dark)，得叠加：
@media (max-width: 480px) and (prefers-color-scheme: dark) {
:root {
--font-size-scale: 0.8;
}
}这种组合查询容易漏，尤其当团队多人维护不同主题逻辑时。建议把所有媒体查询集中在一个 tokens.css 文件里，禁止分散在组件样式中。
