line-height 在响应式中易失衡因默认基于 font-size 倍数计算，而 font-size 随屏幕变化导致行距视觉不均；iOS Safari 对小字号还有额外压缩。用 clamp() 动态控制可守住 1.2–1.6 安全区，如 line-height: clamp(1.25, 0.2vw + 1.35, 1.55)，配合 @supports 降级，避免媒体查询碎片化和 JS 重排。
line-height 为什么在响应式中容易失衡
因为 line-height 默认是相对于当前字体大小（font-size）计算的倍数，而响应式中 font-size 经常随屏幕缩放变化，如果 line-height 固定写死为数值（比如 line-height: 1.5），在小屏上字变小但行距不变倍，视觉上会显得过疏；大屏字变大后又可能过密。更麻烦的是，某些设备（如 iOS Safari）对小字号下的行高渲染有额外压缩倾向。
用 clamp() 动态控制 line-height 最简方案
现代 CSS 支持用 clamp() 让 line-height 在合理区间内平滑过渡，避免突兀跳变。关键不是“适配所有尺寸”，而是守住最小可读性（小屏不挤）、最大舒适度（大屏不松散）两个边界。
- 小屏下
line-height不宜低于1.2（否则文字贴在一起） - 大屏下不宜高于
1.6（否则段落像隔行） - 基准值建议设为
1.4，再用视口单位微调
body {
font-size: clamp(14px, 2.5vw, 18px);
line-height: clamp(1.25, 0.2vw + 1.35, 1.55);
}
上面的 0.2vw + 1.35 是线性插值：在 320px 宽时约等于 1.29，在 1920px 时约等于 1.51，自然落在安全区间内。
配合 rem 或 viewport 单位做 font-size 调整时，line-height 别用固定数值
常见错误是这样写：
立即学习“前端免费学习笔记（深入）”；
html { font-size: clamp(12px, 2vw, 16px); }
p { font-size: 1rem; line-height: 1.5; }
问题在于：当 1rem 变成 12px 时，line-height: 1.5 算出来只有 18px，行距实际不足；而变成 16px 时又变成 24px，可能过大。正确做法是让 line-height 也基于 rem 或直接用 clamp() 独立控制：
- 用
em：它相对当前元素的font-size，比rem更可控，比如line-height: 1.4em - 用无单位数值（如
1.4）本身没问题，但必须确保父级font-size的变化幅度合理，否则仍会失衡 - 真正稳健的做法仍是给
line-height单独加clamp()，和font-size解耦
需要兼容老浏览器时的降级策略
IE 和旧版 Android 浏览器不支持 clamp()，此时推荐两层 fallback：
- 先写一个保守的固定值（如
line-height: 1.4）作为兜底 - 再用
@supports覆盖为动态值 - 避免用 JS 动态计算——触发重排且延迟明显
p {
line-height: 1.4;
}
@supports (line-height: clamp(1, 1, 1)) {
p {
line-height: clamp(1.25, 0.15vw + 1.3, 1.5);
}
}
注意：不要试图用媒体查询逐断点写 line-height，维护成本高，且中间尺寸容易遗漏。clamp() 的连续性才是响应式排版的核心优势。
最易被忽略的一点：字体加载完成前，浏览器可能用系统默认字体渲染，此时 line-height 会按临时字体计算，造成闪动。务必配合 font-display: swap 和足够宽松的 clamp() 下限。
