应立即在用户选择后存入localStorage，用input[type="range"]绑定id读写html根字体大小，设置html{font-size}确保rem统一缩放，读取时加try-catch防异常，并在DOMContentLoaded中初始化。
怎么用 localStorage 持久化保存用户选的字号
直接写进 localStorage 就行，但必须在用户点击/选择后立刻存，不能等到页面卸载或提交表单时才存——beforeunload 不可靠，移动端尤其容易丢失。
常见错误是把字号值存在内联样式里却没同步存到 localStorage，导致刷新后还原失败。
- 用
document.documentElement.style.fontSize设置根字体，比操作body或局部元素更统一 - 存的时候转成字符串，比如
localStorage.setItem('font-size', '18px')，别存数字 18 然后漏掉单位 - 读取时加 try-catch，
localStorage可能被禁用或满额，避免整个脚本报错中断
字号选择器 HTML 结构怎么写才方便 JS 绑定
用 <input type="range"> 最省事，拖动实时响应，也兼容键盘（左右键、PageUp/PageDown），不用自己做按钮组。但注意默认值和范围得匹配实际可用字号。
别用一堆 <button> 拼出来的“伪选择器”——DOM 节点多、事件绑定散、无障碍支持差，后期想加“恢复默认”都得额外写逻辑。
立即学习“前端免费学习笔记（深入）”；
- range 的
min="12"、max="24"、step="1"对应常用字号区间，单位是 px，别设成 0.8rem 这类相对值 -
value初始值建议从localStorage读，读不到再 fallback 到 16 - 给它加
id="font-size-slider"，JS 里用document.getElementById('font-size-slider')拿，比 class 查询稳定
为什么设置 html { font-size: ... } 而不是直接改 body 或 p
因为 rem 单位依赖根元素的 font-size，改 html 才能让所有用 rem 的组件（如按钮、标题、间距）同比例缩放。只改 body 字号，h1 用 2rem 还是按原始 html 计算，结果就错乱了。
另一个坑是 CSS 里写了 font-size: 100% 或 em，这种会叠加计算，导致最终字号偏离预期。
- 确保全局 CSS 没有强制覆盖
html字号的规则，比如某些重置库（normalize.css）里可能带html { font-size: 100% } - 调试时在 DevTools 里直接看
html元素的 Computed > Font Size，确认它真变了 - 移动端 viewport 缩放可能干扰，测试时关掉双指缩放：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
刷新后字号没恢复？检查这三处
不是 JS 没跑，而是执行时机或作用域错了。最常发生在 DOM 尚未加载完就去读 localStorage 并设样式，或者用了模块打包后变量作用域隔离，导致设置逻辑没生效。
- 把初始化代码包在
document.addEventListener('DOMContentLoaded', ...)里，别放在 script 标签底部就以为够了 - 如果用了
defer加载 JS，确保它在 CSS 后面执行，否则可能被样式表覆盖 - 检查是否多个地方都在改
html.style.fontSize，比如框架初始化又重置了一次，用console.log打印中间值就能定位
