vw单位直接设font-size会导致文字忽大忽小，因视口变化引发vw值跳变；应改用calc()结合rem基值与小系数vw增量，并设置降级和line-height锚定。
vw单位直接设font-size为什么文字会忽大忽小
因为vw是视口宽度的1%，手机横屏时100vw可能超过竖屏两倍，文字直接撑满屏幕——这不是“自适应”，是“随窗口抽风”。浏览器缩放、双屏切换、甚至iOS Safari地址栏收起都会触发视口重算，vw值跳变，文字跟着抖。
实操建议：
- 别单独用
font-size: 4vw，必须加限制范围 - 优先用
calc()套一层最小/最大阈值，比如font-size: calc(1.2rem + 1.5vw)，让基础值兜底、增量部分响应 - 移动端慎用超过
6vw，iPhone SE竖屏下6vw ≈ 14px，已接近可读下限
calc里怎么写才能兼顾小屏不糊、大屏不空
核心是“基础字号 + 视口比例增量”，而不是纯靠vw撑。例如calc(1rem + 0.5vw)：小屏时1rem主导（防过小），大屏时0.5vw缓慢爬升（防过大）。
常见错误现象：font-size: calc(16px + 2vw)在1920px宽屏下变成54.4px，标题像海报，正文却看不清。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
rem或em作基值，方便全局缩放控制，比如font-size: calc(1.125rem + 0.25vw) - 增量系数控制在
0.1–0.4之间，超过0.5大概率在平板以上设备溢出 - 配合
clamp()更稳（但注意Safari 13.4+才支持），例如font-size: clamp(1rem, 1.125rem + 0.25vw, 1.5rem)
兼容性差的坑：哪些浏览器根本不认calc里的vw
老版本Android WebView（4.4及更早）、IE全系、UC浏览器旧内核，会把calc(1rem + 2vw)整个声明当无效值丢弃，回落到父级font-size——结果就是文字突然变小一档，且无报错。
实操建议：
- 必须写降级：先写固定值，再覆盖
calc，如font-size: 1.125rem; font-size: calc(1.125rem + 0.25vw); - 不要依赖
@supports (font-size: clamp(...))做判断——它不检测calc中vw的支持度 - 真要兼容Android 4.x，改用JS监听
resize动态设style.fontSize，但只在必要场景上（如活动页）
line-height和vw字体一起用时为啥行距炸开
因为line-height若写成1.5（无单位），它是相对于当前font-size计算的；而font-size本身在变，line-height就跟着非线性放大——小屏时行距紧凑，大屏时字没大多少，行距却拉得稀疏。
实操建议：
-
line-height统一用无单位数值（如1.4），别用px或rem，确保它始终锚定当前字号 - 如果需要微调，用
calc()同步控制，比如line-height: calc(1.3 + 0.05vw)，但增量必须远小于字号增量 - 检查
vertical-align和padding是否也用了vw，三者叠加容易让容器高度失控
真正难的不是写出calc(1rem + 0.3vw)，而是想清楚这个0.3在320px、768px、1440px三个断点下分别产出多少像素，以及用户会不会在横屏iPad上眯着眼读正文。
