vw单位因无边界限制导致小屏文字过小、大屏文字过大；clamp()需统一单位基准并设合理min/max；横竖屏切换需媒体查询兜底；必须锁定text-size-adjust防字体缩放。
因为vw是纯数学缩放，不设边界就等于把字体控制权交给屏幕宽度——iPhone SE上4vw≈12px（看不清），4K屏上4vw≈153.6px（顶穿导航栏）。
font-size: Xvw 为什么在小屏/大屏上直接失控
vw单位的计算逻辑极其简单：1vw = 视口宽度 × 1%，它不判断设备类型、不参考阅读舒适区、不关心父容器限制。结果就是：
- iPhone SE（320px）下
3.75vw= 12px，比系统默认正文还小，文字发虚、易误读 - iPad Pro（1024px）下
3.75vw= 38.4px，标题撑满卡片，line-height失效、按钮被遮挡 - 4K显示器（3840px）下
4vw= 153.6px，h1直接顶进状态栏，滚动时文字撕裂
clamp() 三个参数单位不统一就会跳变
很多人写clamp(1rem, 2em, 2.5rem)，以为能“智能过渡”，但em依赖父级font-size，而父级可能已被rem或vw覆盖，导致中间值忽大忽小。
安全写法必须统一基准：
-
min用固定值：比如14px或0.875rem（保小屏可读） -
preferred用vw或calc()：比如2.8vw或calc(1rem + 0.3vw)（脱离上下文依赖） -
max别超2.2rem（≈35px），否则高分屏下标题会挤到顶部安全区外
典型可用写法：font-size: clamp(14px, 2.8vw, 2.2rem);
横竖屏切换时 vw 值卡住不更新
iOS Safari 和部分安卓 WebView 在旋转瞬间不会重算vw，字体尺寸冻结在旧值——这不是 bug，是渲染管线限制。
仅靠 JS 强制重排（如document.body.style.transform = 'scale(1)'）不稳定，推荐媒体查询兜底：
@media (orientation: landscape) {
html {
font-size: calc(100vw / 375 * 16);
}
}
断点建议按真实设备宽度设：375px（iPhone 8）、414px（iPhone Plus）、768px（iPad）、1024px（桌面窄屏）。
真机上字体突然变小，大概率是 text-size-adjust 没锁死
DevTools里看着正常，一上 Android Chrome 或 Samsung Internet 就缩成8px——这是浏览器启用 Font Boosting 的表现，CSS单位再准也无效。
必须显式锁定：
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
别用none，它会破坏视障用户系统字号设置；也别漏掉-webkit-前缀，iOS 12+ 仍需它。
真正麻烦的不是怎么写clamp()，而是设计稿只给竖屏字体规范，横屏标题没定义字号层级，开发硬套同一套vw逻辑，结果横屏下h1和p挤成一行——这时候补 CSS 已经晚了，得倒推改设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
