line-height 必须用无单位数值（如1.5），因其作为乘数能随 font-size 动态缩放；若用 px 或带单位 em，则在响应式、系统缩放或 clamp() 场景下失效，导致行距失衡。
line-height 必须用无单位数值（如 1.5），否则在不同分辨率下会失联——固定像素值或带单位的 em 都无法随 font-size 动态缩放，这是多数人调不好的根本原因。
为什么 line-height: 1.6 比 line-height: 24px 更可靠
行高不是独立尺寸，它得跟着字号呼吸。一旦写死 px，就切断了和 font-size 的绑定关系：
- 当
font-size缩到12px，line-height: 24px就变成 2 倍行距，文字悬浮感太强 - 当
font-size放大到20px，同一24px行高可能压住字母 “g”“y” 的下降部 - 用户开启系统级字体放大（如 Windows 缩放 125% 或 iOS 辅助功能），
px值完全不响应 - 用
clamp()或rem动态调字号时，px行高直接失效
而 line-height: 1.6 是乘数，浏览器实时按当前 font-size 计算：16px × 1.6 = 25.6px，20px × 1.6 = 32px —— 安全、可预测、无需维护。
如何用 @media 配合 line-height 微调不同断点
光靠一个全局 line-height 不够，小屏需紧凑、大屏要舒展，但调整必须基于无单位值，不能改单位：
立即学习“前端免费学习笔记（深入）”；
- 手机端（≤767px）：正文用
font-size: 14px+line-height: 1.4，避免过松 - 平板端（768–1023px）：升为
font-size: 16px+line-height: 1.5 - 桌面端（≥1024px）：可用
font-size: 18px+line-height: 1.55，但注意字号越大，感知垂直空间越紧张，line-height反而不宜盲目拉高
关键点：所有断点里的 line-height 仍保持无单位，只调数值；不要在媒体查询里塞 line-height: 26px 这类写法。
搭配 clamp() 时 line-height 怎么设才不出错
clamp() 只动 font-size，它不管行高。如果只写一句 font-size: clamp(1rem, 1.25rem, 2rem)，而 line-height 还是 1.5，那没问题；但若你试图给 line-height 也套 clamp()，就容易翻车：
-
line-height不支持clamp()中混用单位（比如clamp(1.2, 1.5vw, 1.8)无效） - 旧版 Safari（iOS 13.3 及更早）会静默丢弃含
clamp()的整条声明，包括line-height - 真正稳妥的做法是：保持
line-height为无单位值，并确保它与各层级字号语义匹配（例如.text-lg对应line-height: 1.44，而非统一1.5）
复杂点在于：行高不是越“大”越好，而是要匹配字号层级的视觉密度——这点比写对代码还难察觉，一不留神就让大标题显得空洞，小字注释挤成一团。
