Bootstrap如何让文字在Modal内根据窗口大小缩放

Modal内文字不随窗口缩放的典型表现是小屏溢出、换行错乱、遮挡按钮，根源在于Bootstrap默认使用固定font-size（如1rem），未绑定视口单位；应采用clamp()按层级控制字号，如.modal-title用clamp(1.25rem, 4vw, 1.75rem)，.modal-body p用clamp(0.875rem, 3.2vw, 1.125rem)，并覆盖.modal-dialog的max-width限制以实现真正响应式缩放。

Modal内文字不随窗口缩放的典型表现

直接在modal-body里写普通段落，窗口缩小后文字会溢出、换行错乱，甚至遮挡按钮——这不是CSS没生效，而是Bootstrap默认用固定font-size（如1rem），没绑定视口单位。

用vw或vmin替代px/rem

核心是把字体大小从静态值换成相对视口的单位，但不能全量替换，否则小屏下文字过小不可读。推荐按层级控制：

1. .modal-title用clamp(1.25rem, 4vw, 1.75rem)：最小1.25rem保可读，最大1.75rem防过大，中间随宽度线性缩放
2. .modal-body p用font-size: clamp(0.875rem, 3.2vw, 1.125rem)：正文更敏感，但上限压得更低
3. 避免对button、form-control等交互元素用vmin，会导致小屏点按困难

注意modal-dialog的max-width干扰

Bootstrap的.modal-dialog默认设了max-width: 500px，窗口再宽文字也不放大。必须覆盖这个限制：

.modal-dialog {max-width: 90vw;}.modal-content {font-size: clamp(1rem, 2.5vw, 1.25rem);}

这里90vw确保对话框始终占满大部分视口，而font-size放在.modal-content上，能统一影响标题、正文、footer里的文字。

移动端Safari的clamp()兼容性坑

iOS 14.5+才支持clamp()，老版本会回退到第一个值（如1.25rem）。如果需兼容，改用媒体查询分段：

.modal-title {font-size: 1.25rem;}@media (min-width: 480px) {.modal-title { font-size: calc(1.25rem + 0.5vw); }}@media (min-width: 1200px) {.modal-title { font-size: 1.75rem; }}

关键点：别依赖JavaScript动态计算字号——Modal打开时窗口尺寸可能未稳定，且重绘开销大；纯CSS方案更可靠，也更轻量。