用 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 修复。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
慎用 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，看返回值是否符合预期。
