最稳妥方案是用rem配合html根元素动态调整字体大小，通过JS根据屏幕宽度或用户偏好设置document.documentElement.style.fontSize，并同步协调line-height、font-weight等属性以避免布局错乱。
用 rem 配合 html 根元素动态调整字体大小最稳妥
直接改 body 或个别标签的 font-size 会导致响应式失效、缩放不一致，甚至破坏第三方组件样式。推荐统一用 rem 单位，所有尺寸都相对于 html 元素的 font-size 计算。
实操建议：
- 在
中加入一段 JS，根据屏幕宽度或用户偏好动态设置document.documentElement.style.fontSize - 例如：屏幕宽度 ≥ 768px 时设为
16px，14px，避免小屏文字挤成一团 - 若需支持“用户手动放大/缩小”功能，可把字号存在
localStorage，页面加载时读取并应用 - 注意：不要在 CSS 中用
html { font-size: 62.5% }这类写法——它依赖浏览器默认字号（可能被用户修改），不可靠
em 和 rem 到底该用哪个？
em 是相对父元素字号计算，嵌套深了极易失控；rem 始终相对根元素，可控性强得多。HTML5 模板里除非明确要做局部缩放（比如卡片内文字随卡片大小等比变化），否则一律优先选 rem。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用了
em写按钮文字，结果按钮放在导航栏里又套了一层nav，字号突然变大一倍 - CSS 中写了
h1 { font-size: 2em }，但父容器加了font-size: 0.8em，实际渲染远小于预期 - 媒体查询里用
em做断点，结果因用户修改了浏览器默认字号，断点错位
用 clamp() 实现字体大小的平滑响应式过渡
纯媒体查询切换字体容易出现“阶梯感”，比如从 16px 突然跳到 18px。CSS 的 clamp() 函数能实现连续变化，适合标题等对视觉节奏敏感的元素。
h1 {
font-size: clamp(1.25rem, 4vw, 2rem);
}
说明：clamp(最小值, 建议值, 最大值)，浏览器会根据视口宽度在三者间插值。注意：
-
4vw是关键——它让字号随屏幕线性变化，但必须配合上下限，否则超大屏下文字会过大 - 旧版 Safari（clamp()，需加
font-size: 1.5rem作为降级 - 别对正文段落（
p）滥用clamp()，行高、字间距跟不上变化时，可读性反而下降
用户系统字号设置会影响 HTML5 网站吗？
会，而且影响方式很隐蔽。iOS 和 Android 的“更大字体”系统设置，会直接放大 rem 和 em 的基准值（即根字号），但不会放大 px 或 vh。这意味着：
- 用
px写字号 = 放弃系统无障碍支持，对视力障碍用户不友好 - 用
rem+ 正确初始化根字号（比如用1rem = 16px而非固定像素值），才能既响应系统设置，又保持设计比例 - 测试时务必在 iOS “设置 > 辅助功能 > 显示与文字大小” 中开启“更大的字体”，看是否出现文字截断、布局错乱
真正难处理的是字体大小和行高、字重、字间距之间的耦合——调大字号后，如果 line-height 还是固定 1.4，小屏幕下多行文本可能粘连；这些细节没配平，再好的字号方案也白搭。
