clamp() + rem 是当前最简洁、可维护性最强的自适应字体方案，但必须配合根元素 html 的基准设置，且 safari 13.4+ 和 chrome 82+ 才完整支持；仅用 vw 会导致滚动/缩放时字号“呼吸”、不响应系统字体缩放，损害可访问性。
直接结论：用 clamp() + rem 是当前最简洁、可维护性最强的自适应字体方案，但必须配合根元素 html 的基准设置，且要留意 Safari 13.4+ 和 Chrome 82+ 才完整支持。
为什么不能只靠 vw 单位撑字号
单独用 font-size: 5vw 看似简单，实际滚动时文字会随视口缩放“呼吸”，尤其在桌面端拖拽窗口宽度时，标题忽大忽小，阅读节奏被打断。更关键的是，vw 不响应用户系统级字体缩放（比如 Windows “放大文本”设为 125%），对可访问性不友好。它适合局部装饰性文字，不适合正文或标题主干。
clamp() 怎么写才不翻车
clamp() 的三个参数顺序固定：最小值、首选值、最大值。常见错误是把 vw 放中间却不加约束，导致小屏过小、大屏过大。
- 安全写法示例：
font-size: clamp(14px, 2.5vw, 18px);—— 小于 14px 强制兜底，大于 18px 截断，中间线性过渡 - 别写成
clamp(12px, 4vw, 24px)：4vw 在 320px 屏上仅 12.8px，逼近浏览器最小渲染限制（Chrome 强制 ≥12px）；24px 在 2560px 屏上又太大，破坏视觉层级 - 如果设计稿基于 750px 宽，可用
clamp(14px, 1.866vw, 18px)（因为 750 × 1.866% ≈ 14）—— 这比硬套公式更直观
根字号（html { font-size }）设多少才合理
设 html { font-size: 16px; } 是惯性做法，但它让 1rem = 16px 成为死值，失去弹性。真正推荐的是：
- 基础方案：
html { font-size: 100%; }—— 继承浏览器默认（通常 16px），同时尊重用户系统缩放设置 - 进阶方案：
html { font-size: clamp(14px, 0.75vw + 1rem, 18px); }—— 把根字号本身也做成响应式，子元素用rem就自动联动 - 绝对避免：
body { font-size: 16px; }后再让子元素用em—— 多层嵌套下em会指数级放大，调试时根本算不清实际像素
旧浏览器兜底和最小字号限制怎么处理
IE 完全不支持 clamp()，Safari 13.3 及更早版本解析异常。上线前必须加降级：
- 先写 fallback：
font-size: 16px;，再覆盖font-size: clamp(...);，老浏览器自然忽略后一句 - Chrome/Firefox 对
font-size 会强制按 12px 渲染，所以 <code>clamp()的最小值别设低于 12px，除非你用transform: scale()或<svg></svg>绕过（但会牺牲可选中文本和 SEO） - 移动端 Safari 在横屏时
vw基于屏幕总宽（含状态栏），可能导致计算偏差，建议用min-width/max-width媒体查询微调
最常被忽略的一点：自适应不是“让字跟着屏幕变”，而是“让字在不同设备上保持一致的阅读体验”。这意味着你要测的不是 320px 和 1920px 下的像素值，而是用户在 30cm 距离看手机、在 60cm 距离看桌面时，文字在视网膜上的物理尺寸是否协调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
