CSS变量需配合var()引用才能生效，媒体查询中必须在:root下重设变量值，且引用处须写font-size: var(--font-size-base)；漏引用、定义位置错、单位缺失、!important覆盖或IE不支持均导致失效。
CSS变量本身不响应屏幕变化，必须靠媒体查询显式重写值才能触发字体更新；直接在:root里改font-size比用变量更直接，但变量更适合多属性联动控制。
为什么var(--font-size-base)在媒体查询里改了却没生效
常见错误是只改了变量值，但没让实际样式引用它。浏览器不会“自动把所有font-size换成变量”，你得手动在选择器里写font-size: var(--font-size-base)。
- 漏掉
var()引用：比如.title { font-size: 1.5rem; }→ 即使--font-size-base变了，它也不动 - 变量定义位置错：写在
.card里而不是:root，媒体查询中:root重设无效 - 单位缺失或错配：
--font-size-base: 16（缺px）→calc()或var()引用时静默失败 - 被
!important覆盖：某处写了font-size: 18px !important，变量再怎么变都无效
@media中重设:root变量的正确写法
媒体查询不是监听器，而是静态匹配规则。只要条件满足，:root里的变量就会被覆盖，所有引用它的样式实时重绘。
- 必须写在
:root选择器下：@media (min-width: 768px) { :root { --font-size-base: 1.125rem; } } - 断点之间不继承：桌面端没写
--font-size-base，就回退到移动端初始值，不能指望“上一个断点留下的值” - 避免硬编码像素值：用
--breakpoint-md: 768px定义断点，但注意@media (min-width: var(--breakpoint-md))是非法语法，只能用于声明块内 - 初始值建议设移动端默认：
:root { --font-size-base: 1rem; }，后续断点按需放大
font-size用rem还是var()？关键看控制粒度
如果只调字体大小，直接改:root { font-size: 14px; }最省事；但如果还要同步控制padding、line-height、border-radius，用变量更统一。
立即学习“前端免费学习笔记（深入）”；
- 用
rem：适合全局等比缩放，但line-height要用无单位值（如1.5），否则会嵌套放大 - 用
var()：适合阶梯式跳变（小屏14px → 中屏16px → 大屏18px），且能和calc()组合，比如--font-heading: calc(var(--font-size-base) * 1.5) - 混用风险：
clamp(14px, 4vw, 18px)完全不响应--font-size-base；要让它参与缩放，至少一项得是rem，例如clamp(0.875rem, 4vw, 1.125rem) - JS动态修改时，
document.documentElement.style.setProperty('--font-size-base', '1.25rem')有效，但别漏单位
容易被忽略的兼容性和调试细节
IE全系不支持CSS变量，PostCSS降级只能处理构建时静态值；JS设置的变量会被媒体查询覆盖，除非你主动监听resize并同步逻辑。
-
viewportmeta标签必须存在：<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端根本不会触发@media (max-width: 768px) - Chrome DevTools里看“Computed”面板的
font-size最终值，确认是否被更高优先级规则覆盖 - 变量名大小写敏感：
--FontSize和--font-size是两个变量 - 嵌套
calc()时单位必须完整：calc(var(--gap) * 2)要求--gap是0.5rem，不是0.5
