最稳妥方式是直接设置document.documentelement.style.fontsize，因为html根元素是rem单位的唯一基准，改body或容器无法影响表单控件、ui库组件及绕过body的框架样式；需用data属性存缩放倍率、getcomputedstyle读真实基准、math.min/max限制范围，并避开!important、第三方css覆盖及vw/clamp硬编码干扰。
直接改 document.documentElement.style.fontSize 是最稳妥的全局调节方式，比逐个改 p、h1 等元素更可靠，也避免遗漏子元素或伪元素。
为什么不能只改 body 或某个容器的 font-size？
只设 body 的 font-size 会影响大部分继承文字，但以下情况会失效：
-
button、input等表单控件默认不继承body字体，尤其在 Chrome/Firefox 中常回退到系统默认值 - 用
rem单位的组件（如 UI 库里的按钮、弹窗）依赖的是html根节点的font-size，不是body - 某些 CSS 框架（如 Bootstrap）显式设置了
font-size: 1rem在根元素上，绕过body设置
所以真正生效的锚点只有一个：html 元素。
点击按钮时如何安全更新 html font-size？
关键不是“加减像素”，而是维护一个可复位、有边界、不崩 layout 的缩放逻辑：
- 用
data-current-scale属性存当前倍率（如1.0、1.2），而不是硬记 px 值，避免多次点击后精度漂移 - 每次点击前先读取当前
getComputedStyle(document.documentElement).fontSize，再换算成 rem 基准（例如 16px → 1rem），防止用户手动缩放过页面 - 限制范围：最小
0.8rem（约 12.8px），最大1.5rem（约 24px），用Math.min/Math.max截断 - 别用
transform: scale()模拟——它只缩放渲染，不改变盒模型尺寸，会导致点击区域错位、行高异常
示例函数：
function setRootFontSize(scale) {
const base = 16; // 默认 1rem = 16px
const newSize = Math.min(Math.max(scale * base, 12.8), 24);
document.documentElement.style.fontSize = newSize + 'px';
}
按钮点击后字体没变？检查这三处
常见失效原因不是 JS 写错，而是被更高优先级样式压制：
-
html { font-size: 100% !important; }——!important会阻断 JS 动态设置，删掉或改成html:not(.js-font-resize) { ... } - 页面加载了第三方 CSS（如 normalize.css、Ant Design），它们可能重置了
html的font-size，建议在 JS 执行后立即覆盖一次 - 用了
vw或clamp()直接写死html或body的font-size，例如html { font-size: clamp(12px, 2vw, 24px); }，这种声明无法被 JS 覆盖，得改用 JS 控制的 rem 方案
移动端双击放大后按钮失效怎么办？
这不是字体逻辑问题，而是 Safari/Android WebView 的 viewport 缩放干扰：
- 用户双击放大时，视口缩放比例（
window.visualViewport.scale）变化，但html font-size不会自动响应 - 解决方案：监听
visualviewport事件，在缩放结束时重新应用当前 scale，或干脆禁用双击缩放：<meta name="viewport" content="width=device-width, user-scalable=no"> - 更健壮的做法是把字体缩放和 viewport 缩放解耦——只靠 JS 改
html.style.fontSize，不依赖设备缩放行为
真正麻烦的从来不是怎么写那几行 JS，而是浏览器默认行为、CSS 优先级、第三方库干预这三股力量怎么互相拉扯。动手前先看一眼 computed style 里的 html 元素，比反复刷新页面更有用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
