Bootstrap默认line-height为无单位固定比值（如1.5），不随屏幕变化；需通过根元素font-size配合rem、媒体查询或clamp()实现响应式行高，避免使用px或em导致失控。
行高为什么不会自动随屏幕变化
bootstrap 默认的 line-height 是固定数值（比如 1.5），它基于当前字体大小计算，但字体大小本身若没响应式调整，行高自然也不会“变”。单纯改 line-height 为 1.2 或 1.6 这类无单位值，只是比例，不解决“视觉行距随屏幕缩放”的真实需求——你真正要的是：小屏紧凑、大屏舒展，且和字号协同变化。
用 rem + 媒体查询手动控制行高
Bootstrap 本身没提供 line-height 的响应式工具类，得自己补。核心思路是：让行高跟随根字体大小（font-size: 16px → 1.4rem），再配合媒体查询动态调 html 的 font-size。
- 在
html上设基础字号：html { font-size: 16px; } - 小屏（
sm）下调根字号：@media (max-width: 576px) { html { font-size: 14px; } } - 大屏（
lg）上调：@media (min-width: 992px) { html { font-size: 18px; } } - 所有文字用
rem设行高，比如p { line-height: 1.4rem; }—— 这样行高会随根字号同比例缩放
用 CSS clamp() 实现平滑过渡（推荐）
比断点更细腻，适合不想写多个媒体查询的场景。Bootstrap 5+ 项目可直接用：
p {
line-height: clamp(1.2, 0.8rem + 1.2vw, 1.6);
}
解释一下这个表达式：clamp(最小值, 当前值, 最大值)，其中 0.8rem + 1.2vw 让行高随视口宽度线性增长；rem 锚定基础字号，vw 提供弹性增量。实测在手机到 4K 屏都能保持可读间距，且无需 JS 干预。
注意：clamp() 在 IE 完全不支持，如需兼容 IE，必须回退到媒体查询方案。
避免踩坑：不要用 em 或固定 px 行高
em 会继承父元素字体大小，嵌套深了容易失控；px 行高（如 line-height: 24px）完全不响应。尤其当 Bootstrap 的 .h1～.h6 类自带不同 font-size 和 line-height 时，硬写 px 会导致标题在小屏上行距过大、文字挤在一起。
另一个常见错误：给 body 设 line-height: 1.5，以为全局生效——但它只作用于直接子元素，且无法响应缩放。真正可控的方式，始终是绑定到根字号或使用 clamp()。
复杂点在于，行高不是孤立属性，它和 font-size、letter-spacing、甚至 padding 共同影响段落呼吸感。改行高之前，先确认你的字体大小是否已响应式，否则单调行高只会放大不协调感。
