直接改font-size不生效是因为CSS变量仅存储值，必须显式用var(--font-base)赋给:root的font-size才能驱动rem响应；漏掉:root{font-size:var(--font-base)}则所有rem均失效。
为什么直接改 font-size 不生效
很多人在 CSS 里写了 --font-base: 18px，然后期待所有文字变大——结果没反应。根本原因是：CSS 变量只是“存值”，不自动作用于任何属性；必须显式用 var(--font-base) 赋给某个元素的 font-size 才会起效。
更关键的是，如果想让 rem 单位响应变化，font-size 必须设在 :root 上，且必须绑定变量：
:root {
--font-base: 16px;
font-size: var(--font-base); /* 这一行不能少 */
}漏掉 font-size: var(--font-base)，整个页面的 rem 就不会动，哪怕变量值改了十次。
document.documentElement.style.setProperty 怎么用才对
用 JS 动态调字体大小，不是直接改 document.body.style.fontSize，而是要写进根元素的 CSS 变量里，浏览器才会触发级联重绘。
立即学习“前端免费学习笔记（深入）”；
- 滑块拖动时必须监听
input事件（不是change），否则拖动过程无响应 - 写法固定：
document.documentElement.style.setProperty('--font-base', value + 'px')，单位px不能省，否则var(--font-base)解析失败，静默降级为默认值 - 初始值要在 CSS 里声明：
:root { --font-base: 16px; }，否则 JS 第一次 setProperty 时变量未定义，部分老浏览器可能不渲染 - 避免在媒体查询里重复设
font-size，比如@media (max-width: 768px) { :root { font-size: 14px; } }，会覆盖 JS 设置的变量值
哪些地方容易被 px 和 em 暗算
改了变量，但某些文字就是不变大，大概率是这些地方硬编码了绝对单位或用了错误相对单位：
-
font-size: 14px—— 完全无视变量，必须改成font-size: 0.875rem或font-size: var(--font-base) -
font-size: 1.2em—— em 相对于父元素，不是根元素，不会随:root font-size变，换成rem才行 - 第三方组件内部样式（如图标库、UI 库弹窗）若用
font-size: 16px，得额外加!important覆盖，或检查其是否支持font-size透传 - Bootstrap Icons 这类字体图标，靠
font-size控制大小，但若外层容器color被禁用（如button:disabled），图标会灰掉——这不是变量问题，是字体图标渲染机制决定的
主题色和字体大小怎么一起管
字体大小和主题色本质是同一套机制：都靠 CSS 变量 + JS 动态注入。但主题色通常用于 color、background-color 等属性，而字体大小只影响 font-size 和派生单位（rem、em）。两者可以共用一个控制入口，但别混用单位：
- 主题色变量如
--primary-color应该只赋给颜色相关属性，不要塞进font-size里 - 字体大小变量如
--font-base别拿去当color值用，类型错位会导致解析失败 - 如果用同一个滑块同时调字体和颜色，JS 里要分两行设：
setProperty('--font-base', size + 'px')和setProperty('--primary-color', '#5e60ce') - 注意变量作用域：全局主题变量放
:root，局部组件主题放对应容器选择器里，避免污染其他区域
真正难的不是写几行 CSS 或 JS，而是确认每个文字节点是否真的走的是 rem 或 var() 路径——浏览器开发者工具里逐个检查 computed style，比猜强十倍。
