clamp() + vw 是当前最稳妥、可维护性最高的响应式字号方案，因它无需 JS、不依赖根字体动态设置，且现代浏览器已全面支持；纯 vw 缺乏边界控制，小屏过小、大屏过大，易致文字发虚或层级错乱，而 clamp(18px, 6.4vw, 32px) 以最小保可读、首选按设计稿比例、最大防溢出，三值均有业务依据。
直接用 clamp() + vw 是当前最稳妥、可维护性最高的方案，不需要 JS 计算，不依赖根字体动态设置，现代浏览器（iOS Safari 13.4+、Chrome 84+、Firefox 79+）已全面支持。
为什么不用纯 vw？
纯 font-size: 4vw 在小屏上会缩得太小（比如 iPhone SE 的 320px 宽度下，4vw = 12.8px），文字发虚、难识别；在大屏 iPad 上又可能过大（4vw 在 1024px 宽度下是 41px），破坏排版节奏。它缺乏安全边界。
常见错误现象：
- 小屏下文字糊成一片，用户要凑近看
- 横屏切换后字体突然跳变，视觉断裂
- 辅助文字（如 label、hint）比正文还大，层级错乱
clamp() 怎么写才靠谱？
核心是三参数必须有真实业务意义：最小值保可读、首选值按设计稿比例换算、最大值防溢出。不要凭感觉填数字。
立即学习“前端免费学习笔记（深入）”；
假设设计稿宽 375px，标题在稿中是 24px：
- 最小值：定死
18px（iOS 系统最小推荐可读字号） - 首选值：按比例算 →
24 / 375 = 6.4%，即6.4vw - 最大值：设
32px（避免在 iPad Pro 上超大）
最终写法：font-size: clamp(18px, 6.4vw, 32px);
注意：clamp() 中不能混用单位（比如 1rem + 2vw 合法，但 1em + 2vw 会失效），且 Safari 旧版对嵌套 calc 支持不稳定，建议只用简单表达式。
旧浏览器怎么兜底？
Android 4.4 WebView、iOS Safari clamp()，必须降级。媒体查询断点要选真实设备宽度，不是抽象尺寸。
推荐断点组合：
-
@media (max-width: 320px)→font-size: 16px（iPhone 5/SE） -
@media (min-width: 375px)→font-size: 3.6vw（iPhone 6–13） -
@media (min-width: 768px)→font-size: 18px（iPad 竖屏固定值，避免拉伸变形）
关键细节：媒体查询里不要写 min-width: 375px 和 max-width: 374px 两套互斥规则——某些安卓 WebView 会同时命中，导致样式覆盖混乱。
别忘了 viewport 和系统限制
如果 font-size 没生效，先检查 <meta name="viewport"> 是否漏了或写错。常见错误：
- 写了
user-scalable=no却没配maximum-scale=1.0，iOS 会忽略 initial-scale - 漏掉
text-size-adjust: 100%，部分安卓浏览器会强制放大文本 - 用了
font-size: clamp(...)但父元素设置了transform: scale()，导致计算基准被干扰
真正容易被忽略的点：横屏时视口宽度突变，vw 值会跳变，但用户没意识到这是正常行为——如果你发现横屏后字体“卡住”不动，大概率是 JS 监听了 resize 并强行重设了 html 字体，反而和 CSS 的 clamp() 冲突了。
