vw 是视口宽度的1%，1vw=视口宽的1%；用 clamp(16px, 4vw, 28px) 可限制字体在16–28px间按4vw动态缩放，兼顾小屏可读性与大屏比例感。
用 vw 单位可以让字体大小随视口宽度等比缩放，是响应式文本的常用方案，但直接全用 vw 容易导致小屏字太小、大屏字太大，需要配合限制和微调。
vw 是什么？怎么算？
1vw = 视口宽度的 1%。比如屏幕宽 1920px，那么 1vw = 19.2px；宽 375px（iPhone SE），1vw ≈ 3.75px。字体设为 font-size: 4vw，在 1920px 屏幕下就是约 76.8px，在 375px 下只有 15px——明显偏小，可读性差。
避免极端尺寸：用 clamp() 限定范围
CSS 的 clamp() 函数能设定最小值、首选值、最大值，完美解决 vw 的“放飞”问题：
-
font-size: clamp(16px, 4vw, 28px);表示：最小 16px，最大 28px，中间按 4vw 动态计算 - 小屏（如 375px）时，4vw = 15px，但低于最小值 16px，所以取 16px
- 中等屏（如 750px）时，4vw = 30px，但超过最大值 28px，所以取 28px
- 真正生效区间大概在 400px–700px 左右，兼顾可读与比例感
更精细控制：结合媒体查询或流体排版公式
如果项目对文字层级要求高（比如标题需严格遵循设计系统），可以：
立即学习“前端免费学习笔记（深入）”；
- 用
@media分段设置：小屏用 rem，中大屏切入 vw - 用线性公式实现平滑过渡，例如：
font-size: calc(16px + 0.75vw);—— 基础 16px，每增加 100px 视口宽，字体+7.5px - 搭配
line-height和letter-spacing一起响应，避免行距失衡
注意兼容性和实际体验
vw 在所有现代浏览器都支持（包括 iOS Safari 9+），但要注意：
- 横屏/竖屏切换时，vw 基于当前视口宽实时变化，可能造成闪动，可加
transition: font-size 0.2s缓和 - 用户设置了系统字号放大（如安卓「更大文字」），纯 vw 会忽略该偏好，建议关键正文仍以
rem或em为主，仅标题等装饰性文字用 vw - 不要对 body 直接设
font-size: 2vw，否则整个继承链都会被扭曲
