最轻量可靠的正文字号方案是 clamp() + vw，配合 line-height 和 letter-spacing 微调；纯 vw 会导致小屏过小、可访问性差、重排卡顿，且不响应系统字体缩放。
直接用 clamp() + vw 控制正文字号，配合 line-height 和 letter-spacing 微调，是目前最轻量、最可靠的做法；别用纯 vw，也别在没设 <meta name="viewport"> 的前提下硬上。
为什么不能只写 font-size: 4vw
单独用 vw 单位会让文字在小屏下缩得过小（比如 320px 屏上 2.5vw = 8px），浏览器虽会强制兜底到 12px，但可读性已严重受损；桌面端拖拽窗口时字号还会“呼吸式”跳变，打断阅读节奏。更关键的是，它完全不响应系统级字体放大设置（如 Windows 的“更大文本”或 iOS 的辅助功能缩放），对可访问性不友好。
-
font-size: 4vw在 iPhone SE（320px）上仅 12.8px，实际渲染可能糊成一片 - 用户开启系统字体放大 150% 时，
vw字号毫无变化，而rem或系统字体继承类方案能同步放大 - 滚动或缩放过程中，
vw值实时重算，触发频繁重排，尤其在低端 Android 设备上易卡顿
clamp() 的三个参数怎么配才安全
clamp() 的顺序必须是 min、preferred、max，且首选值建议统一用 vw 或 rem，避免混用单位（如 clamp(16px, 4vw, 24px) 在 Safari 中可能解析异常）。
- 正文推荐：
font-size: clamp(14px, 2.5vw, 18px)—— 小屏保底 14px，大屏封顶 18px，中间平滑过渡 - 标题可用更激进比例：
font-size: clamp(20px, 5vw, 36px)，但需实测 320px 和 1920px 下的视觉平衡 - 若设计稿基于 750px 宽，可用
clamp(14px, 1.866vw, 18px)（因为 750 × 0.01866 ≈ 14），比硬套公式更贴近实际 - 最小值别低于 12px，否则 Chrome/Firefox 会强制按 12px 渲染，失去控制意义
除了字号，哪些排版属性必须同步适配
字号变了，行高和字间距不调，会导致段落拥挤或松散失衡。尤其是中文，line-height 过小易粘连，过大则断层感强；letter-spacing 则影响小字号下的字符辨识度。
-
line-height建议用无单位数值（如1.6），它会随字号等比缩放；避免写line-height: 24px这类固定值 - 小字号（≤16px）可加
letter-spacing: 0.02em提升清晰度；大字号（≥24px）反而要收窄至-0.01em防止松散 - 段落
margin-bottom推荐用1.2em而非16px，确保与字号联动 - 别忽略
font-weight：小屏下用500比400更易读，大屏下400更显轻盈
旧版 WebView 和 Safari 怎么 fallback
Android 6–9 的 WebView、Safari 13.3 及更早版本不支持 clamp()，必须提供降级方案；IE 则完全不识别，只能靠媒体查询兜底。
- 写法必须是先声明 fallback：
font-size: 16px;，再覆盖：font-size: clamp(14px, 2.5vw, 18px);，老浏览器自动忽略后一行 - 对 Android WebView 6–9，补一段媒体查询：
@media screen and (max-width: 360px) { body { font-size: 14px; } } - Safari 13.3 在横屏时
vw基于总屏幕宽（含状态栏），导致计算偏差，可用@media (min-width: 768px) and (orientation: landscape)单独微调 - 真机测试时务必关掉 DevTools 的模拟器，直接用 iOS Safari 和微信内置浏览器切横竖屏——很多 bug 只在真实环境暴露
真正难的不是写出 clamp(14px, 2.5vw, 18px) 这行代码，而是判断要不要加 ResizeObserver 监听容器宽度、要不要响应系统字体缩放、要不要为横屏键盘弹出留白——这些决策点，往往比代码本身更消耗心力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
