结论：应使用 clamp(1rem, 4vw, 1.5rem) 配合 viewport meta 标签和 rem 基准，兼顾小屏可读性、大屏限制与缩放兼容性；单纯 vw 缺乏下限易致字体过小模糊，calc 线性公式仍可能退化，而 clamp 是目前最稳定高效的单行响应式字体方案。
直接说结论：别用 px 写字体大小，用 clamp() 或 max() 配合 vw 单位，再加一个兜底的 rem 基准，三者组合才能真正解决小屏字太小、大屏字太大、缩放时被截断的问题。
为什么 font-size: 2vw 在手机上反而看不清？
因为 vw 是视口宽度的 1%，小屏（比如 375px）下 2vw ≈ 7.5px，远低于可读下限。浏览器不会自动放大到最小字号，它就真按 7.5px 渲染——结果是模糊、发虚、甚至被截断。
- 单纯用
vw缺少下限保护，font-size: 2vw在 iPhone SE 上可能只有 7px，而 iOS Safari 默认最小渲染字号是 11px，部分文字会被强制撑开或错位 -
calc(1rem + 1.5vw)这类线性公式在窄屏下仍可能退化为过小值，尤其当根字号本身没动态调整时，1rem可能还是 16px，加了也白加 - 不要指望“用户缩放”来补救——现代移动端默认禁用双指缩放（
user-scalable=no已被主流可访问性规范弃用），且 H5 页面常嵌在 WebView 里，缩放行为不可控
clamp() 是目前最稳的单行写法
clamp() 能同时定义最小值、首选值和最大值，浏览器自动选最合适的那个，比手写一堆 @media 断点更轻量、更平滑。
- 典型写法：
font-size: clamp(1rem, 4vw, 1.5rem);—— 小屏用1rem（比如 16px），中屏用4vw（随宽度线性增长），大屏卡死在1.5rem（比如 24px） - 注意顺序：
clamp(min, preferred, max)三个参数缺一不可，且min和max必须是绝对单位（rem、px）或固定值，preferred才可用vw - 慎用
clamp(12px, 3vw, 24px)：虽然合法，但混合px和vw容易在高 DPI 屏幕（如 MacBook Retina、安卓 2x 屏）上因像素密度差异导致实际渲染偏差
必须配 <meta name="viewport">，否则一切失效
没有这个标签，移动端浏览器会以桌面宽度（通常是 980px）渲染页面，vw 计算基准就错了——比如你以为 100vw 是 375px，实际是 980px，字体直接放大两倍多。
立即学习“前端免费学习笔记（深入）”；
- 必须写在
<head>最前面，且只写一次：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 别加
user-scalable=no：这会破坏可访问性，且现代 WCAG 标准明确要求允许用户缩放文本 - 别用
maximum-scale=1.0：它会让 iOS 用户无法双指放大查看细节，实测中大量表单字段因此被误判为“不可点击”
复杂点在于混合排版场景下的继承与重置
标题用 clamp() 没问题，但段落、按钮、图标文字如果都套同一套规则，会在小屏上挤成一团；而如果各自写不同 clamp()，又容易在中等屏幕出现字号跳跃。
- 推荐做法：根元素
html设一个基础font-size（比如font-size: 62.5%把 1rem 映射为 10px），所有文字基于rem写比例，再用clamp()包一层——这样既保留 rem 的继承可控性，又获得 vw 的响应能力 - 特别注意
button、input等原生控件：它们有浏览器默认最小字号（Chrome 是 13px，Safari 是 11px），强行设font-size: 0.8rem在小屏可能被忽略，得额外加min-font-size: 12px（虽非标准属性，但配合-webkit-text-size-adjust: none可缓解） - 真正难处理的是图文混排中的标题+副标+摘要：三者字号差不能靠固定倍数（比如 1.5rem / 1.25rem / 1rem），而要按视觉节奏重新用
clamp()分别定义，否则在 414px 宽度下副标可能比标题还大
