index.html怎样设置不同屏幕尺寸下的字体大小？

用 rem + 根元素动态缩放是最稳妥的响应式字体方案，核心是 JS 动态设置 html font-size 并监听 resize/orientationchange，配合 viewport 中 width=device-width, initial-scale=1.0 才能确保 1rem 准确映射。

用 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 必须配对写

如果只写 <meta name="viewport" content="width=device-width">，部分 Android 浏览器会忽略根元素缩放逻辑；必须显式加 initial-scale=1 才能保证 1rem 真正对应 JS 设置的根字号。

错误写法：<meta name="viewport" content="width=device-width">
正确写法：<meta name="viewport" content="width=device-width, initial-scale=1.0">

漏掉 initial-scale=1.0 会导致：iPhone 上字体突然变小、缩放错乱，且无法通过 CSS 修复。

立即学习“前端免费学习笔记（深入）”；

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

clamp(min, preferred, max) 看似简洁，但实际落地有坑：

• 旧版 Safari（16px
• 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，看返回值是否符合预期。