手机端字体需适配屏幕密度、视口宽度和阅读距离，应采用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(...);
别忘了 <meta> 和用户缩放权限
再精细的字体逻辑，遇上强制缩放也会失效。微信内嵌浏览器、iOS Safari 对 viewport 设置极其敏感。
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> - 绝对不要加
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 可触控最小尺寸）
真正难的不是写出几行媒体查询，而是理解：字体大小从来不是孤立属性，它必须和视口控制、用户行为、渲染特性、无障碍需求绑在一起调。漏掉任意一环，都会在某台手机上突然“看不清”。
