直接用vw设字体大小会导致小屏过小（如iPhone SE上约12px）、大屏过大（4K屏达64px），引发阅读困难、容器溢出及与rem/em混用时的基准冲突；clamp()是更稳解法，需合理设置min、preferred（vw或calc）、max值。
直接用 vw 设置字体大小会出什么问题
直接写 font-size: 4vw; 看似简单，但小屏下极易过小（iPhone SE 上 4vw ≈ 12px），大屏下又可能过大（4K 屏上 4vw ≈ 64px），导致文字模糊或撑破容器。这不是“响应式”，是“失控式”。
更隐蔽的问题是：它和 rem 或 em 混用时，基准不一致，缩放逻辑打架——比如 clamp(1rem, 4vw, 2rem) 可行，但 clamp(1rem, 2em, 2.5rem) 就会跳变，因为 em 的父级 font-size 可能已被其他规则改过。
clamp() 是当前最稳的解法，但参数不能乱填
clamp() 的三个参数必须单位兼容、量级合理：
-
min建议设为固定像素值（如14px）或1rem，确保小屏可读； -
preferred必须用vw（如2.5vw）或calc()表达式（如calc(1rem + 0.3vw)），避免用em； -
max要留余量，桌面端别超过2.5rem（约 40px），否则在高分屏上标题会顶到顶部导航栏。
典型安全写法：font-size: clamp(14px, 2.8vw, 2.2rem);
为什么 vh 很少用于正文，但适合全屏标题
vh 是视口高度的 1%，对正文几乎无用——滚动时字体忽大忽小，用户会晕。但它在特定场景不可替代：
- 全屏轮播图上的主标题：
font-size: clamp(2rem, 8vh, 4rem);，高度变化比宽度更稳定； - 登录页居中大字提示：
font-size: 12vh;，配合min-height: 100vh容器，始终占屏高 12%； - 注意：Safari 旧版对
vh在地址栏收起/展开时计算不准，需加height: 100dvh;兜底（dvh是动态视口高度）。
移动端横竖屏切换时 vw 不刷新？得防这坑
iOS Safari 和部分安卓 WebView 在横竖屏切换瞬间，vw 值不会立即重算，导致字体卡在错误尺寸。这不是 bug，是渲染机制限制。解决方式只有两个：
- 监听
resize和orientationchange事件，强制触发重排：document.body.style.transform = 'scale(1)';（空操作触发）； - 更稳妥的是在 CSS 中加一句：
@media (orientation: landscape) { html { font-size: calc(100vw / 375 * 16); } }，用媒体查询兜底。
真正麻烦的不是技术实现，而是设计稿没给横屏字体规范——开发只能按竖屏逻辑硬套，结果横屏标题挤成一行，这时候再补 clamp() 就晚了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
