默认 line-height 失衡因无单位比值仅随 font-size 缩放，而 font-size 若未响应式变化，小屏行长缩短致行距松散、大屏行长拉长致行距过密；推荐用 clamp(1.2, 0.8rem + 1.2vw, 1.6) 绑定视口宽度实现平滑响应，需配合响应式字号，并用 rem+媒体查询兜底旧浏览器。
为什么默认 line-height 在不同屏幕下会“失衡”
Bootstrap 的 line-height 默认是无单位比值（比如 1.5），它只随当前 font-size 缩放，而 font-size 若没响应式变化，行高就纹丝不动。小屏上字号没变小，但视口窄、行长缩短，固定比例的行高会让段落显得松散；大屏上行长拉长，同样比例却可能让行距过密，影响换行节奏和阅读呼吸感。
用 clamp() 绑定行高与视口宽度（推荐）
这是目前最平滑、最少代码的解法，适用于 Chrome 88+ / Firefox 79+ / Safari 14.1+。核心是让行高在最小值和最大值之间随 vw 线性过渡，不依赖断点跳跃。
-
line-height: clamp(1.2, 0.8rem + 1.2vw, 1.6)是实测可用的组合：最小 1.2 倍，基准项含rem锚定基础字号、vw提供弹性增量，上限封顶 1.6 倍 - 别写
clamp(1rem, 2vw, 1.6rem)——rem和vw混合单位在clamp()中无效，必须统一为无单位数值或纯vw/rem - 单独改行高效果有限，务必配合响应式字号，例如
font-size: clamp(0.875rem, 1.8vw, 1.125rem)，否则视觉失衡更明显 - Modal 内建议局部生效：
.modal-body p { line-height: clamp(1.1, 2.8vw, 1.5); }，避免全局污染
用 rem + 媒体查询兜底旧浏览器
若需兼容 IE 或旧版 Edge，clamp() 不可用，就得靠根字号联动。关键不是“设多个 line-height”，而是让所有行高基于可变的 html { font-size }。
- 先设基础：
html { font-size: 16px; } - 小屏下调：
@media (max-width: 576px) { html { font-size: 14px; } } - 大屏上调：
@media (min-width: 992px) { html { font-size: 18px; } } - 所有文字用
rem设行高：p { line-height: 1.4rem; }—— 这样小屏实际是14px × 1.4 = 19.6px，大屏是18px × 1.4 = 25.2px - 别给
body直接设line-height: 1.5，它只影响直接子元素，嵌套后易失控
避开那些看似省事实则埋雷的写法
Bootstrap 自带的 lh-sm、lh-base 工具类只是静态值（lh-sm = line-height: 1.25），没有断点前缀，无法实现「sm 下 1.2、lg 下 1.6」这种需求。
-
em行高会继承父级font-size，嵌套深了（比如.card .h5 p）极易放大失真 -
px行高（如line-height: 24px）完全不响应，小屏挤成一团，大屏空得吓人 -
text-lg-justify是唯一能两端对齐的响应式类，但仅对多行段落有效；单行标题或短文本基本无效，这不是 Bug，是 CSS 本身限制 - Flex 容器内
text-align类失效，要改用justify-content或text-align配合width: 100%才可靠
font-size、line-height、letter-spacing 和容器宽度的协同。改行高之前，先确认字号是否已响应式——否则调得再准，也只是在放大不协调感。
