应使用 clamp() 实现安全响应式字体：如 body { font-size: clamp(14px, 2.5vw, 18px); }，兼顾小屏可读、中屏平滑过渡与大屏防过载，避免单独用 vw/vh 导致字号失控或忽略系统偏好。
vw/vh单位在字体大小中怎么用才不翻车
直接用 font-size: 2vw 看似简单，但实际会出问题：小屏下字太小看不清，大屏下字爆炸撑破容器，且完全忽略用户系统字号偏好（比如 iOS「更大字体」设置）。vw 是视口宽度的 1%，vh 是高度的 1%，它们本身无感知、无上下文，纯线性缩放。
实操建议：
- 避免单独使用
vw做正文字号，尤其不用1vw～3vw这类极小值——iPhone SE 视口宽仅 375px，2vw就是 7.5px，远低于可读下限 - 标题类大字号可用
vw，但必须加min-width和max-width限制范围，或搭配clamp() -
vh更少用于字体，除非做全屏横幅标题且高度严格可控；否则滚动时视口高度变化会导致字体跳动
用 clamp() 实现安全的响应式字体
clamp(min, preferred, max) 是目前最靠谱的方案，它能设定字号下限、理想值和上限，浏览器自动插值，且兼容现代主流浏览器（Chrome 88+、Firefox 79+、Safari 13.4+）。
常见错误是把 clamp() 当成“懒人函数”乱填数值，比如 clamp(16px, 4vw, 32px) —— 在 800px 宽视口下，4vw = 32px，刚好顶到上限，但再宽一点就卡死不动，失去响应意义。
立即学习“前端免费学习笔记（深入）”；
推荐写法（以正文为例）：
body {
font-size: clamp(14px, 2.5vw, 18px);
}
说明：
-
14px是最小字号，确保小屏可读（如 iPhone X 的 375px 宽 →2.5vw≈ 9.4px，会被兜底到 14px） -
2.5vw是中间弹性值，在 560px–720px 区间提供平滑过渡 -
18px是最大字号，防大屏过载（1920px 宽时2.5vw= 48px，必须截断）
配合媒体查询做精细控制更稳妥
纯 clamp() 适合中低复杂度场景；一旦涉及多端差异大（比如平板横竖屏切换、桌面高DPI屏）、或需适配旧浏览器（IE、老 Safari），就得补媒体查询。
例如处理 iPad 横屏（1024×768）和桌面（≥1200px）的不同策略：
@media screen and (min-width: 768px) and (orientation: landscape) {
h1 { font-size: clamp(24px, 4vw, 36px); }
}
@media screen and (min-width: 1200px) {
h1 { font-size: clamp(28px, 3.2vw, 48px); }
}
注意点：
- 不要只按宽度切，
orientation对平板体验影响极大，横屏时视口宽突然变大，单靠vw易导致标题过大 - 旧版 Safari（clamp()，必须提供降级：
font-size: 18px; font-size: clamp(...);，后者会覆盖前者 - 避免嵌套多层媒体查询，优先用
clamp()主逻辑 + 少量关键断点微调
别忘了 line-height 和 rem/em 的协同问题
只调 font-size 不够。当字体随视口缩放时，行高若写死 line-height: 1.5（无单位），它会随字体等比缩放，通常没问题；但若写成 line-height: 24px，就会在小屏下导致行距塌陷。
更隐蔽的问题是：如果项目用 rem 做间距/尺寸单位，而根字体用 vw 动态设置（如 html { font-size: 2.5vw; }），那所有 rem 值都会跟着波动——按钮 padding、卡片 margin 全部抖动，UI 失稳。
建议：
- 行高统一用无单位值（如
1.4、1.6），让它继承字体缩放 - 根字体（
html）慎用vw，优先对具体元素（h1、p）单独设clamp() - 若必须用动态根字体，请搭配
@supports (font-size: clamp(1px, 1vw, 1px))做特性检测，给不支持的环境 fallback 固定值
clamp()，如果没测试开启「更大字体」或「粗体文本」的 iOS/Android 设备，字体仍可能不可读。响应式字体不是技术炫技，而是让文字在任何设备、任何设置下都保持可读、可操作。 
