最稳妥方式是直接设置document.documentelement.style.fontsize，所有rem元素自动缩放；禁用body.style.fontsize、zoom和transform:scale()等错误方案。
直接改 document.documentElement.style.fontSize 最稳妥
改根元素字体大小是响应式缩放最常用也最干净的方式，所有用 rem 单位的元素会自动按比例缩放。别去遍历所有标签设 style.fontSize，既慢又漏样式、破坏 CSS 优先级。
常见错误现象：document.body.style.fontSize = '20px' 看似生效，但子元素如果用了 em 或没重置行高，实际显示可能错乱；更糟的是，它不触发 rem 基准变化，后续缩放完全失效。
- 推荐写法：
document.documentElement.style.fontSize = '16px'（或带单位的任意合法值） - 如果要支持用户切换字号（比如「大中小」），建议把基础值存在
data-属性里，方便后续读取：document.documentElement.setAttribute('data-base-font-size', '18') - 注意兼容性：IE9+ 支持，但 IE 不支持
rem在某些表单控件上（如input的默认高度），需额外微调
用 getComputedStyle 读当前字号再计算，别硬编码
很多代码直接写死 16px 当基准，结果用户浏览器默认字号被改过（比如系统设了 20px），或者用了自定义字体，rem 就会失准。
使用场景：需要动态放大 1.2 倍、还原到初始值、或做无障碍字号适配时，必须先知道真实基准。
立即学习“前端免费学习笔记（深入）”；
- 正确读法：
parseFloat(getComputedStyle(document.documentElement).fontSize) - 别用
document.documentElement.style.fontSize——它只返回内联设置的值，没设过就是空字符串 - 性能影响极小，但别在滚动/动画帧里高频调用；可缓存一次结果，配合
resize或orientationchange事件更新
zoom 和 transform: scale() 是视觉放大，不是字体缩放
这两个方案看起来“一行代码搞定”，但本质是把整个页面像素拉伸，文字会模糊、布局会错位、表单焦点框变形、canvas 渲染异常——它们不是字体大小控制，而是渲染层 hack。
错误现象：用 document.body.style.zoom = '1.2' 后，chrome 下打印预览全乱，safari 直接忽略，firefox 已废弃 zoom；transform: scale() 还会触发新层叠上下文，遮挡 position: fixed 元素。
- 除非你明确只要“伪放大”且能接受所有副作用，否则绕开这两个
- 移动端尤其危险：
transform: scale()会干扰 pinch-zoom 行为，ios Safari 可能禁用双击缩放 - 替代思路：真要全局缩放，还是走
html { font-size: ... }+rem，这是唯一被 CSS 规范保证的行为
用 CSS Custom Properties 配合 js 更灵活，但别滥用
如果你的项目已大量使用 var(--font-base)，那 JS 改变量比直接操作 style.fontSize 更解耦，也方便主题切换。
参数差异：CSS 变量值必须是字符串，JS 设置时得带单位；而 document.documentElement.style.fontSize 是直接写入样式属性，优先级更高。
- 写法示例：
document.documentElement.style.setProperty('--font-base', '18px') - 注意：变量名区分大小写，
--Font-Base和--font-base是两个变量 - 性能上无差别，但调试时得打开 DevTools 的 Computed 面板看变量是否被覆盖——父级作用域变量可能意外覆盖它
- 老版本 edge（≤17）不支持 CSS 变量，如需兼容，得 fallback 到
fontSize写法
改字体大小这事，核心就一条：动根元素的 fontSize，其他都是绕路。容易被忽略的是，用户系统级字体设置和浏览器缩放比例会叠加影响最终效果，光靠 JS 设置一次不够，得结合 matchMedia('(resolution)') 或监听 visualViewport 才算真正可控。