clamp()配合rem与vw是当前最简洁高维护性的响应式字体方案，通过设定最小/推荐/最大字号实现小屏不糊、大屏不飘、中间平滑，需配合合理html{font-size}基准及viewport声明，并依内容类型差异化应用。
直接用 clamp() 配合 rem 和 vw，再加一个基础 html { font-size } 基准，90% 的响应式字体需求就覆盖了。别从 px 开始写，也别一上来就堆媒体查询。
用 clamp() 定义最小/推荐/最大字号
这是目前最简洁、可维护性最高的主线方案。它把“小屏不糊、大屏不飘、中间平滑”三件事压缩进一个声明里。
-
clamp()第一个参数是下限（如1rem），防止手机上文字缩到看不见； - 第二个是偏好值（如
4vw），让它随屏幕宽度线性变化； - 第三个是上限（如
2.5rem），避免 4K 屏上标题撑满半页； - 注意：iOS Safari 13.4+、Chrome 84+、Firefox 79+ 支持良好，但 IE 完全不支持，若需兼容 IE，得 fallback 到媒体查询；
- 示例：
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }，比写三段@media更轻量。
设好 html { font-size } 基准再动 rem
rem 不是万能的，它的效果完全取决于根元素的 font-size 是否合理。很多人漏掉这步，直接写 1.2rem，结果在不同设备上缩放失序。
- 推荐设为
html { font-size: 16px; }（或100%），这样1rem = 16px，计算直观； - 如果想配合用户系统缩放（比如 Windows “放大文本”或 macOS “更大字体”），用
100%比16px更稳妥； - 千万别在
body上设font-size: 16px再让子元素用em——这会绕过用户浏览器默认字号设置，损害可访问性； - 需要动态调整时（如根据视口宽度等比缩放），可用 JS 修改
document.documentElement.style.fontSize，但多数场景没必要。
表格、按钮等组件内字体别硬套全局 vw
响应式字体不是“所有文字都跟着屏幕变”。表格单元格、表单控件、图标旁文字对绝对尺寸更敏感，盲目用 4vw 容易导致小屏错位、大屏字挤成一团。
立即学习“前端免费学习笔记（深入）”；
- 表格文字优先用
rem+ 媒体查询微调，例如：@media (max-width: 768px) { table td { font-size: 0.875rem; } }； - 按钮内文字建议用
rem或固定px（如14px），确保点击区域和文字比例稳定； -
vw类字号慎用于行高较小或容器宽度剧烈变化的场景（如侧边栏折叠区），否则文字可能被截断或换行异常； - 记得同步调
line-height和letter-spacing，clamp(1rem, 2.5vw, 1.25rem)配line-height: 1.4比配1.2更安全。
viewport 元标签漏掉会导致字体“看起来小”
很多开发者调了半天 font-size，最后发现只是 iOS Safari 自动缩放惹的祸——页面没声明 viewport，浏览器按桌面模式渲染，再缩放进手机视口，文字物理像素密度暴跌。
- 必须在
<head>中加：<meta name="viewport" content="width=device-width, initial-scale=1">； - 禁用
user-scalable=no，否则视障用户无法双指放大，违反 WCAG； - 检查是否误写了
zoom: 0.8这类 CSS 属性，它会强制缩放整个渲染树，覆盖所有字体设置； - 真机测试时，别只看 Chrome DevTools 的模拟器，Safari 技术预览版或实体 iPhone 的渲染差异常被忽略。
真正难的不是写出 clamp()，而是判断哪段文字该流体缩放、哪段该稳住尺寸、哪段该听用户系统设置。字体响应式不是技术问题，是排版决策问题——每次改 font-size 前，先问一句：这段文字在 320px 宽的手机上是否仍可单手操作？在 27 英寸 5K 屏上是否还保持视觉层级？
