移动端字号看不清的核心是未用对响应式单位；rem 相对于 html 字号，需通过 JS 动态计算或媒体查询使 html font-size 随屏宽变化，再配合合理 rem 值、viewport 设置及字体渲染优化。
移动端字号太小、看不清，核心是没用对响应式单位。rem 能解决这个问题，但关键在根元素 font-size 的动态设置。
用 rem 替代 px 是基础
rem 是相对于根元素（html）字体大小的单位。只要 html 的 font-size 随屏幕宽度变化，所有用 rem 定义的字号就能自动缩放。
比如：
html { font-size: 16px; }
p { font-size: 1.25rem; } /* 实际是 20px */
这时 p 的字号会随 html 的 font-size 等比变化——这是响应式的起点。
让 html 的 font-size 动态适配屏幕
不能写死 16px，要用 JS 或媒体查询让它“活”起来。推荐两种稳妥方式：
立即学习“前端免费学习笔记（深入）”；
- JS 动态计算（推荐）：在页面加载和窗口 resize 时，按屏幕宽度比例设置 html 字号。常见做法是「750px 设计稿 → 1rem = 100px」，即 100px 对应 1rem，那么屏幕宽 375px 时，设 html font-size = 50px，这样 1rem = 50px，字号自然缩小一半，清晰度保持住。
-
CSS 媒体查询分段控制：适合简单项目。例如：
@media screen and (max-width: 320px) { html { font-size: 40px; } }
@media screen and (min-width: 321px) and (max-width: 375px) { html { font-size: 48px; } }
@media screen and (min-width: 376px) { html { font-size: 56px; } }
每档对应一个合理字号，避免过小（如小于 38px）导致文字糊成一片。
字号设定要符合移动端阅读习惯
光有 rem 不够，数值本身得合理：
- 正文建议从 1rem（即当前 html 的 100%）起步，对应实际像素约 44–52px（按上述 44–52px 的 html font-size），再换算成 rem 值；
- 标题可设为 1.4rem、1.8rem，但别盲目放大，防止单行过长或折行混乱；
- 慎用小于 0.8rem 的字号（尤其在 iPhone 上易发虚），最小建议不小于 0.85rem；
- 配合 line-height: 1.4–1.6 和足够字间距（letter-spacing: 0.02em），提升可读性。
别忘了 viewport 和字体渲染优化
rem 生效的前提是页面正确缩放：
- 确保 存在且未被覆盖；
- 加一行 -webkit-text-size-adjust: 100%; 到 body 或 html，防 iOS 自动放大文本；
- 必要时启用清晰字体渲染：
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
基本上就这些。rem 不是万能，但配合合理的根字号策略和基础排版意识，移动端字号模糊问题基本能稳住。
