line-height用无单位值（如1.4）虽随字体缩放但响应式不可控，应结合css变量、calc()和clamp()实现语义化、断点驱动的行高控制，并避免与vertical-align混用导致布局跳动。
line-height 用百分比或无单位数值时，响应式会失效
很多人以为给 line-height 设个 1.5 就能随字体大小缩放，其实它确实会继承父级字号，但问题出在「缩放起点不可控」：如果父元素字体是 16px，子元素是 24px，line-height: 1.5 在子元素上算出来是 36px，看着还行；但一旦父级用了 rem 或 clamp() 动态字号，中间某层没重设 line-height，行距就突然变挤或变松。
真正可控的方式是把行高和当前字号强绑定，靠 CSS 变量 + calc() 主动计算：
html {
--base-font-size: 16px;
}
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: calc(var(--base-font-size) * 1.4 / 16); /* 把 1.4 倍行高映射到当前 rem 基准 */
}
-
line-height的无单位值（如1.4）本质是乘法因子，不是绝对长度，但它不感知视口变化，只响应字体大小变更 - 用
calc(var(--font-scale) * 1.4)这类写法无效——CSS 变量不能直接参与乘法运算，必须提前换算成可计算的数值单位 - 移动端小屏下若字号压缩到
14px，但line-height: 1.5仍按该字号算，可能造成行距过小，建议配合@media单独微调变量值
用 CSS 自定义属性控制多断点行高，别硬写 media 查询
为每个断点写一堆 @media 改 line-height 很累，也难维护。更直接的做法是把断点逻辑收进变量，让一个属性驱动所有层级：
:root {
--line-height-sm: 1.3;
--line-height-md: 1.4;
--line-height-lg: 1.45;
}
@media (max-width: 768px) {
:root { --line-height-sm: 1.25; }
}
@media (min-width: 769px) and (max-width: 1200px) {
:root { --line-height-md: 1.35; }
}
p { line-height: var(--line-height-md); }
h2 { line-height: var(--line-height-lg); }
- 变量名要带语义（
--line-height-sm比--lh-1更易定位用途） - 不要在组件内部重复定义同名变量，否则会覆盖全局断点逻辑
- 如果用
clamp()控制字号，行高变量最好也用clamp()对应调整，例如：--line-height: clamp(1.25, 1.3 + 0.05vw, 1.45);，但注意部分旧浏览器不支持clamp()里的单位混合运算
line-height 和 vertical-align 混用时，响应式下文字会“飘”
当容器内有 inline 元素（比如图标、span）+ vertical-align: middle + 动态 line-height，小屏下文字常出现上下跳动。根本原因是 vertical-align: middle 是按父容器的 line-height 中线对齐，而响应式导致该中线位置不断变化。
- 优先改用
display: flex替代vertical-align，flex 的align-items: center不依赖行高，更稳定 - 如果必须保留 inline 布局，把
line-height固定为normal或具体像素值（如line-height: 1.4em），再用margin-top微调图标位置 - 检查是否在伪元素（
::before/::after）里设置了line-height: 0，这会导致父级行高重算异常，在font-size缩小时尤其明显
字体加载期间 line-height 跳变，怎么平滑过渡
Web Font 加载前用系统字体（如 system-ui），加载后切到自定义字体（如 Inter），两者字形高度不同，即使 line-height 相同，视觉行距也会突变——这不是 bug，是字体度量值（ascent/descent）差异造成的。
- 用
font-display: swap保证文本立即显示，但需配合@font-face的size-adjust或font-optical-sizing: auto（支持度有限） - 更稳妥的是统一字体堆栈的「行高锚点」：在
:root里设--font-ascent-ratio: 0.9;，然后所有line-height都基于这个比例推导，而非默认字体度量 - 开发期可用 Chrome 的「Rendering」面板勾选「Paint flashing」，快速识别哪些元素因字体切换触发了重绘
最麻烦的不是怎么设变量，而是得确认所有用到 line-height 的地方，都和当前字体的 font-size 逻辑对齐——特别是那些被 inherit 或 unset 掉的隐式继承链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
