手机端字体需适配屏幕密度、视口宽度和阅读距离，应采用rem+媒体查询分段设html根字号（≤374px为14px，375–413px为16px，≥414px为18px），标题用clamp()平滑过渡，并确保viewport允许用户缩放及优化行高、字重、点击区域。

手机端字体太小，根本不是“调大一点就行”的问题，而是默认 font-size 没适配屏幕密度、视口宽度和用户阅读距离。直接写 font-size: 16px 在 iPhone SE 屏上可能发虚，在折叠屏上又显得局促——得用可伸缩的基准 + 分段控制。

用 rem + 媒体查询分段调 html 根字号

所有 rem 单位都依赖 html 元素的 font-size。改它，就能批量缩放整站文字，且不影响布局结构。

• 主流手机（375px–414px）设为 16px，贴近系统默认，阅读最自然
• 小屏（≤374px，如老款 iPhone 或窄屏安卓）降到 14px，避免文字挤成一团
• 大屏/折叠屏（≥414px）升到 18px，留出呼吸感，也缓解小字渲染模糊

@media screen and (max-width: 374px) {
  html { font-size: 14px; }
}
@media screen and (min-width: 375px) and (max-width: 413px) {
  html { font-size: 16px; }
}
@media screen and (min-width: 414px) {
  html { font-size: 18px; }
}

之后写文字样式就用 rem：比如 h2 { font-size: 1.25rem; }，在 16px 基准下是 20px，在 18px 下自动变成 22.5px——不用重复写媒体查询。

标题类用 clamp() 实现平滑过渡

clamp() 是目前最靠谱的连续响应方案，尤其适合 h1、h2 这类需要随屏宽渐变的元素。它能防“断层跳变”，比纯媒体查询更细腻。

• 语法：clamp(最小值, 理想值, 最大值)，三者单位可混用（推荐 rem + vw）
• 例如：h1 { font-size: clamp(1.5rem, 5vw, 2.25rem); } → 小屏不小于 24px，大屏不超过 36px，中间按宽度线性增长
• 注意兼容性：iOS Safari 13.4 以下不支持，必须加降级：font-size: 1.5rem; font-size: clamp(...);

别忘了 和用户缩放权限

再精细的字体逻辑，遇上强制缩放也会失效。微信内嵌浏览器、iOS Safari 对 viewport 设置极其敏感。

• 确保
• 绝对不要加 maximum-scale 或 minimum-scale ——这等于剥夺用户双指 pinch 放大的权利
• 真机测试时，一定要手动 pinch 缩放页面，验证是否生效；很多“字体小”问题其实只是被锁死了缩放

行高、字重、点击区域要同步调

光放大字体不够。移动端阅读距离近、手指操作多，排版细节直接影响可读性与可用性。

• 正文行高建议 ≥ 1.6（小屏可到 1.7），给字符留足垂直空间
• 避免 font-weight: 100 / 200，细字重在 Retina 屏易发虚，中文优先选 400–500
• a 标签务必加 padding + display: inline-block，把点击热区撑到至少 44×44pt（iOS 可触控最小尺寸）

真正难的不是写出几行媒体查询，而是理解：字体大小从来不是孤立属性，它必须和视口控制、用户行为、渲染特性、无障碍需求绑在一起调。漏掉任意一环，都会在某台手机上突然“看不清”。