不同屏幕尺寸下index.html字体大小设置方法

用 rem + 根元素动态缩放是最稳妥的方案

聊到响应式字体，说来说去，真正经得起推敲的方案，还是那套老旧但靠谱的组合：rem + 根元素动态缩放。这不是什么新花样，但胜在稳。核心思路其实不复杂——让 html 根元素的字号随屏幕宽度一起动，其他地方统一用 rem 单位来继承。这样一来，整个页面的字体缩放就线性了，不会出现断点衔接处的“阶梯感”。

直接在 body 或各个元素上硬写 px 或 em 来做响应式缩放，后期维护简直是个坑，缩放也不线性。这事儿说白了就一句话：让 html 根元素的 font-size 跟随屏幕宽度变化，其他地方一概用 rem 来表态。

常见的错误做法是只靠媒体查询分段设置 font-size——断点之间字体跳变明显，视觉效果很割裂。更平滑的做法，还得靠 JS 动态计算，具体来说就是：

• 先拿到 window.innerWidth，按照设计的比例映射到目标字号（比如 375px 对应 16px，750px 对应 32px）
• 把算出来的值赋给 document.documentElement.style.fontSize
• 别忘了监听 resize 和 orientationchange，尤其是 iOS Safari，横竖屏切换时压根不会触发 resize
• 初始渲染前就要执行一次，不然白屏阶段会直接拿浏览器默认的 16px 来渲染

viewport 的 width 和 initial-scale 必须配对写

如果只写了 ，部分 Android 浏览器压根不认根元素缩放逻辑。必须把 initial-scale=1 也加进去，才能确保 1rem 老实匹配你 JS 设置的根字号。

错误写法：
正确写法：

弄漏了 initial-scale=1.0 会怎样？iPhone 上字体突然变小、缩放错乱，而且这个问题用 CSS 还真修不了。

慎用 clamp() 直接控制单个元素字体

clamp(min, preferred, max) 看着挺简洁，但实践里踩过的坑可不少：

• 旧版 Safari 对它的支持有限
• 像 clamp(14px, 4vw, 20px) 这种写法，在小屏（比如 320px）下算出来是 12.8px，结果被截断成了 14px，字体又出现了阶梯感
• 多个元素各自用 clamp()，缩放节奏不一致，视觉上很难协调
• 它更适合用来做局部微调（比如标题比正文多撑一点），但不能替代根字号动态方案

调试时优先检查 computed style 中的 font-size 来源

Chrome DevTools 里右键点击元素，在 “Computed” 选项卡下找到 font-size 行，点右侧箭头展开，就能清楚看到这个字号是来自内联样式、CSS 规则还是浏览器默认值。

有几个容易忽略的细节：

• 父元素用了 em，子元素又用 rem，实际成了混合计算，极其容易失控
• CSS 里写了 font-size: inherit，但父级是 JS 动态改的，DevTools 有时不实时刷新继承链
• 某些 UI 库（如 Ant Design）自带字体重置，会直接覆盖你的根字号逻辑，需要保证自定义样式在它们的 CSS 之后加载

真想快速验证，直接在 Console 里敲一行 getComputedStyle(document.documentElement).fontSize，看返回值是否符合预期就行。