直接写width: 80%或max-width: 600px会出问题，因无法兼顾小屏溢出、大屏留白、缩放错位、横竖屏切换及高DPI适配；应改用clamp(320px, 90vw, 640px)实现流体宽度，并配合--modal-max-height和orientation媒体查询确保全场景响应式。
为什么直接写 width: 80% 或 max-width: 600px 会出问题
弹窗在小屏上可能过宽（撑破视口）、大屏上又太窄（留白过多），而单纯用百分比或固定像素值无法兼顾缩放、横竖屏切换、高DPI设备等场景。更关键的是：当用户缩放页面（比如 Ctrl+ 放大到 125%），width: 80% 仍按原始视口算，但实际可用空间已变，导致弹窗错位或溢出。
用 --modal-width + clamp() 控制基础宽度
现代浏览器（Chrome 97+、Firefox 93+、Safari 15.4+）支持 clamp()，它是实现流体宽度最简洁的方式。变量声明要放在 :root 或 body 上，确保全局可读：
body {
--modal-width: clamp(320px, 90vw, 640px);
}
.modal-dialog {
width: var(--modal-width);
}
-
320px是最小宽度（防 iPhone SE 竖屏下过窄） -
90vw是弹性中值（随视口缩放，但不占满，留边） -
640px是最大宽度（避免大屏上内容行过长影响阅读）
注意：旧 Safari（≤15.3）不支持 clamp()，需用 @supports 降级：
@supports not (width: clamp(0px, 0px, 0px)) {
.modal-dialog {
width: 90vw;
max-width: 640px;
min-width: 320px;
}
}
配合 --modal-max-height 防止内容截断
仅控宽不够——弹窗内容高度动态时，max-height: 80vh 在 iOS 地址栏收起/展开瞬间会抖动。正确做法是用变量解耦计算逻辑，并预留 header/footer 高度：
body {
--modal-header-height: 56px;
--modal-footer-height: 48px;
--modal-max-height: calc(80vh - var(--modal-header-height) - var(--modal-footer-height));
}
.modal-body {
max-height: var(--modal-max-height);
overflow-y: auto;
}
- 别用
height: 100%或flex: 1去“撑满”弹窗主体，这会让max-height失效 - iOS 上必须用
min-height: 100vh作父容器高度基准，而非height: 100vh - 如果弹窗含异步加载内容，DOM 插入后浏览器自动重排，无需 JS 强制
scrollIntoView
响应式交换纵横比时，变量必须成对更新
当弹窗内嵌视频或画布，且需横竖屏切换纵横比（如 16:9 → 9:16），不能只改一个变量。否则 calc(var(--aspect-h) / var(--aspect-w) * 100%) 会算错：
:root {
--aspect-w: 16;
--aspect-h: 9;
}
@media (orientation: portrait) {
:root {
--aspect-w: 9;
--aspect-h: 16;
}
}
重点在于：@media (orientation: portrait) 比纯宽度断点（如 max-width: 768px）更可靠——iPad 横屏时宽度可能超 1024px，但仍是横屏逻辑；而 orientation 媒体特性能真实反映设备朝向。另外，所有涉及 padding-top 实现 aspect-ratio 的方案，都依赖父容器有明确宽度来源，这点极易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
