必须动态修改 document.documentElement.style.fontSize 来调整根字号，才能使全站 rem 值自动重算并保留系统缩放；滑块值应映射为百分比（min="87.5"、max="150"、value="100"），监听 input 事件赋值，确保字号在 12px–24px 范围内；调节失效常因 !important、px 固定值或第三方组件未响应根字号导致，需检查 Computed 面板及组件主题 API；clamp() 和媒体查询无法替代用户手动调节，因其不响应滑块且兼容性差，JS 应单独设置 fontSize 而非覆盖 cssText。
必须用 document.documentElement.style.fontSize 动态修改根字号
改 body 或单个元素的 style.fontSize 都会出问题：前者干扰 em 计算、覆盖用户系统缩放（Windows “放大文本”/macOS “更大字体”失效），后者漏掉标题、按钮、弹窗等非目标元素，且嵌套深时字号失控。只有改 html 元素的 font-size，才能让全站所有 rem 值自动重算，同时保留系统缩放继承链。
input[type="range"] 滑块值要映射为百分比，不能硬写 px
滑块本身无单位，直接赋 18px 会锁死字号，切断用户浏览器缩放（比如用户设了 125% 缩放，你写死 18px 就把它覆盖了）。正确做法是：
- 滑块
min="87.5"（对应 14px）、max="150"（对应 24px）、value="100"（默认 16px） - 监听
input事件，取event.target.value + '%'赋给document.documentElement.style.fontSize - 确保最小值 ≥ 12px（可读性底线），最大值 ≤ 24px（防移动端溢出）
调节失效的三个真实原因，和调试路径
不是 JS 写错了，而是样式层或 DOM 状态干扰了最终渲染：
-
font-size被!important或更高优先级选择器覆盖（如第三方组件里.dialog-title { font-size: 20px !important; }）→ 打开开发者工具看Computed面板，确认生效值来源 - 存在写死
px的文字（如h1 { font-size: 32px; }）→ 必须统一转成2rem或用 CSS 变量接管 - 第三方组件内部用
em或px固定字号（如日历弹窗、富文本编辑器）→ 这类组件通常不响应根字号变化，需查其文档是否提供主题 API 或自定义 class 注入点
为什么不能用 clamp() 或媒体查询替代动态调节
clamp(14px, 2.5vw, 18px) 是响应式基准，不是用户可调行为。它只随视口宽度变化，无法响应滑块输入；而且 Safari 13.4+ 才稳定支持，IE 完全不认。用户手动调节是独立交互通道，必须靠 JS 实时驱动 html 的 font-size。若把两者混用（比如先设 clamp()，再 JS 覆盖），要注意 JS 赋值会清空原有声明——应避免用 document.documentElement.style.cssText = 'font-size: ...'，而用 document.documentElement.style.fontSize = ... 单独设置，保留其他样式规则。
立即学习“前端免费学习笔记（深入）”；
