HTML5中用vw配合clamp()实现移动端字号自适应，核心是font-size: clamp(最小值, 理想值, 最大值)，如clamp(16px, 4vw, 24px)，其中理想值按设计稿基准（如375px）反推vw倍数，再结合rem或媒体查询兜底兼容。
在 HTML5 中，用 vw 配合 clamp() 实现移动端字号自适应，核心是让字体大小随视口宽度平滑变化，同时限制最小和最大值，避免过小看不清或过大挤占布局。
理解 clamp() 的三个参数含义
clamp(最小值, 理想值, 最大值) 是 CSS 中的范围限制函数。浏览器会取三者中的“合适值”：当理想值小于最小值时，采用最小值；大于最大值时，采用最大值；否则就用理想值本身。
例如：font-size: clamp(16px, 4vw, 24px); 表示字体最小 16px、最大 24px，中间按视口宽度的 4% 动态缩放。
用 vw 设定理想值的关键技巧
vw 是视口宽度的 1%，所以需根据设计稿基准（如 375px 或 750px）反推合适的倍数，让字号在典型设备上显示合理：
立即学习“前端免费学习笔记（深入）”；
- 若希望在 375px 宽屏上显示 18px，则理想值可设为
18 / 375 * 100 ≈ 4.8vw - 若设计稿基于 750px、期望中屏（如 iPhone X）显示 16px，可用
16 / 750 * 100 ≈ 2.13vw - 实际中常微调，比如
clamp(14px, 2.6vw, 20px)更兼顾小屏可读性与大屏克制感
配合 rem 或媒体查询做兜底兼容
clamp() 在较老 Android 浏览器（如 Chrome
/* 先写降级方案 */
h1 { font-size: 18px; }
/* 再用 @supports 覆盖支持 clamp 的环境 */
@supports (font-size: clamp(1rem, 1rem, 1rem)) {
h1 { font-size: clamp(1.125rem, 2.8vw, 1.5rem); }
}
这样既保证老旧设备有基本字号，又让现代浏览器获得流畅缩放体验。
避免常见误区
- 不要直接用
clamp(14px, 100vw, 20px)——100vw太大，会在小屏瞬间放大到整个屏幕宽 - 慎用过大的 vw 值（如 >6vw），可能导致横屏时字号爆炸式增长
- 标题和正文建议分开设置，比如
h1: clamp(1.5rem, 4.2vw, 2.5rem)，p: clamp(1rem, 2.4vw, 1.25rem)
