Bootstrap 5 Modal响应式行高需用clamp()或媒体查询手动设置，如.modal-body p { line-height: clamp(1.1, 2.8vw, 1.5); }，并配合font-size: clamp(0.875rem, 2.5vw, 1rem)确保小屏可读性。
Modal内文字行高不随窗口缩放？用CSS视口单位直接控制
bootstrap modal本身不处理文字行高响应式，必须手动加css。核心思路是放弃line-height固定值，改用vh或vw单位，让行高随视口动态变化。
常见错误是只设font-size响应式，却忽略line-height仍为固定值（比如1.5），结果小屏下文字挤成一团。
- 优先用
line-height: 1.2rem或line-height: clamp(1.1, 2.5vw, 1.4)——clamp()在现代浏览器更可控 - 避免写
line-height: 1.5这种无单位数值，它会继承父元素字号，但无法响应缩放 - 如果Modal内容区有
.modal-body，直接给它加样式比全局改p标签更安全
Bootstrap 5 Modal里怎么写响应式行高CSS？
Bootstrap 5默认使用Flex布局，.modal-body是flex-direction: column，所以文字流不受影响，可放心加行高规则。
实操建议：
- 在自定义CSS中写：
.modal-body p { line-height: clamp(1.1, 2.8vw, 1.5); } -
clamp(最小值, 建议值, 最大值)中，2.8vw表示每1%视口宽度对应0.028倍行高，适合大多数正文；小屏时回落到1.1，大屏封顶1.5 - 若需兼容IE，退回到
line-height: calc(0.8em + 1.2vw)，但注意calc()里单位不能混用（em + vw合法，px + vw不合法）
为什么加了响应式行高，Modal滚动条还是错位？
滚动错位通常不是行高问题，而是line-height变化后，.modal-body高度没重绘，尤其在Modal已打开状态下调整窗口大小。
- 手动触发重绘：监听
resize事件后对.modal-body执行offsetHeight读取（强制重排） - 更稳妥的做法是把行高逻辑交给CSS媒体查询，而不是纯视口单位：
@media (max-width: 576px) { .modal-body p { line-height: 1.2; } } @media (min-width: 577px) and (max-width: 992px) { .modal-body p { line-height: 1.35; } } @media (min-width: 993px) { .modal-body p { line-height: 1.5; } } - 如果用了
overflow-y: auto且内容高度突变，记得给.modal-body加scroll-behavior: smooth减少跳动感
字体大小也得一起调，否则行高再准也没用
只调line-height不调font-size，小屏下字太小、行高相对过大，阅读体验反而更差。
- 推荐组合：
.modal-body p { font-size: clamp(0.875rem, 2.5vw, 1rem); line-height: clamp(1.1, 2.8vw, 1.5); } -
clamp()第一个参数建议不低于0.875rem（14px），防止iOS Safari小屏下文字过小不可读 - Bootstrap 5的
.modal-title默认用h5，它的font-size是1.25rem，若要同步响应，也得单独加clamp规则
真正麻烦的是多段落混合排版——比如标题+正文+列表嵌套，每种元素的line-height缩放节奏不同，得逐个测试clamp参数，没有一劳永逸的值。
