直接改document.documentElement.style.fontSize是首选，因所有rem单位的字体、行高、间距会同步响应缩放，无需逐个重设；若只改某div的fontSize，em或未声明单位的子元素易失效或错乱。
为什么直接改 document.documentElement.style.fontSize 是首选
因为所有用 rem 单位写的文字、行高、间距都会同步响应，不用逐个元素重设。如果只改某个 <div> 的 style.fontSize，子元素里用 em 或没声明单位的值就容易失效或错乱。
常见错误是写成 document.documentElement.style.fontSize = 18 —— 缺单位，浏览器直接忽略。必须带单位，比如 '18px' 或 '112.5%'。
- 推荐用
px做绝对控制（如限制在12px–24px），避免百分比在嵌套缩放时漂移 - 初始值写死在
<style>里：html { font-size: 16px; }，别依赖浏览器默认 - 读取当前值要用
getComputedStyle(document.documentElement).fontSize，不能读style.fontSize（可能为空）
加减按钮怎么绑定状态并防越界
用户点“放大”多次后，字号不能无限涨；点“缩小”也不能小到看不见。得实时判断当前值，再决定是否允许操作。
- 用
parseFloat()提取当前fontSize数值，单位自动剥离 - 每次点击前检查：若当前值 ≥
24，禁用放大按钮（设disabled+opacity: 0.5） - 同理，≤
12时禁用缩小按钮 - 按钮要加
aria-pressed="false"，点击后切换为"true"，屏幕阅读器能感知状态变化
localStorage 保存偏好时容易漏掉的细节
存的是数值（如 18），不是带单位的字符串（如 "18px"）。否则页面重载后读出来再拼单位，容易多出 "18pxpx" 这种错误。
立即学习“前端免费学习笔记（深入）”；
- 存：
localStorage.setItem('textSize', String(currentSize)) - 取：
const saved = localStorage.getItem('textSize');，然后if (saved) document.documentElement.style.fontSize = saved + 'px'; - 务必在
DOMContentLoaded后执行读取逻辑，否则可能被后续 CSS 覆盖 - 别忘了监听
storage事件——同一域名下其他标签页修改字号时，本页也能同步更新
移动端和键盘快捷键怎么不冲突
iOS Safari 里双指缩放会干扰按钮效果，而无障碍用户习惯用 Shift + 5/Shift + 6 控制字号。这两套机制必须共存，不能互相覆盖。
- viewport 里别写
user-scalable=no，否则禁了系统缩放，也等于禁了快捷键的底层能力 - 快捷键监听用
keydown，且只在event.target === document.body时触发，避免输入框内误触 - 按钮组用
display: flex; gap: 8px;布局，不用浮动或inline-block—— 后者在小屏上容易换行错位 - 最易被忽略的是：字号变更后，
line-height和padding是否也用了rem。如果按钮内边距写的是8px，放大后按钮文字变大但按钮本身没撑开，点击热区就偏了
