直接用js改font-size易出问题，因未同步处理line-height、white-space和容器宽度约束，且浏览器对px有最小渲染阈值；clamp()更高效精准，js仅在拖拽缩放、ie11兼容或内容高度动态调整时必要。
为什么直接用JS改font-size容易出问题
手动监听window.resize并计算字号看似可控，但实际会触发频繁重排、小屏文字被强制拉高、iOS Safari缩放后错位——根本原因是没同步处理line-height、white-space和容器宽度约束。浏览器对px字号的渲染有最小阈值（通常12px），你设10px它可能仍按12px画，导致缩放曲线断裂。
用clamp()替代JS的核心理由
现代CSS的clamp(1rem, 2.5vw, 1.5rem)本质是浏览器原生实现的响应式插值，比JS更高效、更精准。它不依赖JavaScript执行时机，不受requestAnimationFrame节流影响，且能与vmin、max-width等属性天然协同。JS方案只在以下场景必要：modal-dialog支持拖拽缩放、需要兼容IE11、或字号需根据Modal内容高度动态调整（比如长文本自动压缩）。
必须保留的JS关键防护点
若仍需JS控制，以下三点漏掉一个就会导致对齐错乱：
- 给
.modal-body加min-width: 320px，否则窄屏下vw计算会让字号跌破可读下限 - 每次更新
fontSize后，必须同步重设lineHeight为无单位值（如1.4），避免固定px行高卡死 - 检查
.modal-dialog是否被挂载到body直系下——若父容器有position: relative，所有基于document.documentElement.clientWidth的计算都会偏移
最简可用的JS缩放逻辑（非clamp兜底场景）
仅当clamp()无法满足需求时才用这段代码，例如Modal需适配旧版iOS或动态内容高度：
function updateModalTextSize() {
const modal = document.querySelector('.modal.show');
if (!modal) return;
const width = Math.min(document.documentElement.clientWidth, window.innerWidth);
const size = Math.min(Math.max(14 + (width - 400) * 0.005, 14), 18);
modal.querySelectorAll('.modal-title, .modal-body > *').forEach(el => {
el.style.fontSize = `${size}px`;
el.style.lineHeight = '1.4'; // 必须同步
});
}
window.addEventListener('resize', () => requestAnimationFrame(updateModalTextSize));
updateModalTextSize();
注意：这段代码不处理vh变化、不兼容transform: scale()缩放，且无法替代viewport元标签缺失导致的vw失效问题——那些得先修底层。
