推荐正文用 rem、大标题用 clamp(1.25rem, 4.2vw, 2.25rem)，因 rem 适配根字体适合全局统一缩放，vw 基于视口适合标题拉伸，clamp 可兼顾最小最大限制避免极端尺寸。
font-size 用 rem 还是 vw？关键看是否需要跟随视口缩放
rem 适配根元素 html 的 font-size，适合全局统一缩放；vw 直接基于视口宽度（1vw = 1% of viewport width），适合标题等需随屏幕拉伸的场景。两者不互斥，但混用容易失控——比如同时用 rem 做基础字号、vw 做大标题，若没设最小/最大限制，小屏下文字可能缩到不可读。
- 纯 rem 方案：用 JS 或媒体查询动态设置
document.documentElement.style.fontSize，例如按 375px 设计稿等比缩放：document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px';
- vw 方案更简单：直接写
font-size: 4.8vw;（对应 375px 下 18px），但必须加min-font-size和max-font-size（CSS 不原生支持，得用@media或 clamp()） - 推荐组合：正文用
rem，大标题用clamp(1.25rem, 4.2vw, 2.25rem)——既保底线，又免溢出
clamp() 是什么？它怎么替代一堆 @media 查询
clamp() 是 CSS 中的范围限定函数，语法为 clamp(MIN, PREFERRED, MAX)，浏览器会自动在最小值和最大值之间按偏好值插值。它不是“响应式字体”的银弹，但对线性变化的字号控制极高效，尤其适合移动端标题。
- 错误写法：
font-size: clamp(16px, 2.5vw, 24px);—— 2.5vw 在 375px 是 9.375px，远低于 16px，实际永远取 16px - 正确比例：先算基准比例，如设计稿 375px 对应 20px，则
20 / 375 = 0.0533，写成clamp(16px, 0.0533vw, 24px)（注意单位是vw，不是%） - 兼容性：Chrome 88+、Firefox 79+、Safari 13.1+ 支持；旧版 Safari 需加
-webkit-clamp()前缀（但实际无效），稳妥起见仍要提供 fallback
px、em、rem、%、vh/vw 这些单位到底谁该用在哪儿
单位选错，响应式就从根上歪了。核心原则：**静态内容用 px 或 rem，流体容器内用 em，全屏级变化用 vw/vh，绝对不要用 % 控制字体大小（它继承父元素 font-size，链式继承极易失控）**。
-
px：图标文字、按钮内固定字号（如12px辅助说明）、禁用状态文字 —— 明确不希望缩放 -
rem：正文段落、列表项、表单标签 —— 统一由根节点控制，用户缩放页面时能整体响应 -
em：仅用于组件内部相对缩放，比如按钮里图标比文字小 20%，写font-size: 0.8em;（此时继承按钮自身的font-size） -
vw：横幅标题、Hero 区主文案 —— 要求在 iPad 和手机上视觉占比一致
line-height 设为无单位数值才是真响应式
很多人写 line-height: 1.5em 或 line-height: 24px，这会导致行高脱离字体尺寸独立变化，小字号下显得拥挤，大字号下又太空。正确做法是用**无单位数值**，如 line-height: 1.5 —— 它表示“当前 font-size 的 1.5 倍”，随字体等比缩放。
立即学习“前端免费学习笔记（深入）”；
- 错误：
line-height: 1.5em→ 实际是父元素font-size的 1.5 倍，非当前元素 - 危险：
line-height: 20px→ 字号变大后行高卡死，文字贴顶或重叠 - 安全：
line-height: 1.4或line-height: 1.618（黄金比例），配合font-size单位自然联动 - 额外注意：
vertical-align和line-height共同影响内联元素对齐，若用vw字号又没调好line-height，文字常在小屏上“飘”起来
字体响应式最难的不是写对某个单位，而是让所有层级的字号、行高、字间距在各种设备上保持视觉节奏一致。clamp() 看似方便，但比例系数必须手算验证；rem 看似稳妥，但 JS 动态设置时机不对（比如未监听 resize）就会失准。真正可靠的方案，往往是两三种单位在不同层级各司其职，而不是押注某一个“万能解”。
