必须将CSS变量绑定到:root的font-size上，即:root{font-size:var(--font-base,16px);}，否则rem单位不会响应变化；滑块需用input事件调用setProperty更新变量，并采用非线性映射优化体验。
滑动条绑定 JS 修改 document.documentElement.style.setProperty
用户拖动滑块时，必须用 JS 把新值写入根元素的 CSS 变量，而不是直接改 font-size 属性。浏览器只响应变量值变化触发的级联重绘，且变量需带单位（如 px 或 rem），否则 var(--font-base) 引用会静默失败。
- 滑块
input事件中调用document.documentElement.style.setProperty('--font-base', value + 'px') - 初始值建议设为
16px，并在:root中声明：:root { --font-base: 16px; } - 避免在媒体查询里重复设置
font-size，否则会覆盖 JS 动态值 - 滑块
value范围建议控制在 12–24，防止过小导致可读性崩溃或过大撑破布局
font-size: var(--font-base) 必须显式写在 :root 的 font-size 上
很多人以为定义了 --font-base 变量，所有 rem 就自动跟着变——其实不会。真正驱动整个页面缩放的是根元素的 font-size 值，而它必须明确绑定变量。
- 正确写法：
:root { font-size: var(--font-base, 16px); } - 错误写法：
:root { --font-base: 16px; }（没把变量用到font-size上，rem 全部失效） - 如果用了
clamp()，至少一项得是rem单位，例如clamp(0.75rem, 4vw, 1.25rem)，否则不响应变量变化 - 第三方组件若内部用
em写padding，它不会随rem缩放，需额外用!important覆盖或检查其是否支持font-size透传
滑块值如何映射到合理字体尺寸
用户拖动的数值是线性的，但字体大小感知是非线性的。直接把滑块 12–24 映射成 12px–24px 会导致小字号段变化太敏感，大字号段又显得迟钝。
- 推荐用
Math.round(12 + (value - 12) ** 1.3)类非线性映射，让前半段更平缓 - 或者分段映射：
12→14px、16→16px、20→18px、24→20px，更符合阅读习惯 - 移动端建议限制最大值为
18px，避免横屏时单行过长；桌面端可放宽至22px - 记得在滑块
input事件里同步更新aria-valuenow和显示文案，满足无障碍要求
为什么改了变量，部分文字没变大
最常见原因是某些选择器压根没用 rem 或 var()，而是硬编码了 px、em 或视口单位。
立即学习“前端免费学习笔记（深入）”；
- 检查是否有
font-size: 14px这类绝对值写死的规则，它们完全无视变量 - 检查是否有
font-size: 1.2em——em相对父元素，不是根元素，不会随--font-base变 - 图标字体（如 Font Awesome）若用
font-size: 16px，也要改成font-size: 1rem才同步缩放 - 使用开发者工具在 Elements 面板里选中文字，看 Computed 栏中
font-size是否最终解析为带px的值，以及来源是否是:root的var()
实际生效的关键不在“定义变量”，而在“让根字体真实依赖它”——漏掉这一环，再精细的滑块逻辑也白搭。
