核心在于布局模型选型+尺寸控制策略+滚动行为显式声明：用flex替代absolute居中，max-width/max-height配overflow-y:scroll，遮罩层设overscroll-behavior:contain防穿透。
弹窗在小屏上被截断、大屏上留白过多、缩放后滚动失效——这些问题不是靠加 !important 能解决的，核心在于布局模型选型 + 尺寸控制策略 + 滚动行为显式声明。
用 display: flex 替代 position: absolute 居中
绝对定位配合 top: 50% + transform: translateY(-50%) 在缩放或动态内容插入时容易偏移，且无法响应父容器尺寸变化。Flex 容器天然支持内容驱动的居中逻辑：
-
.modal-overlay设为display: flex，用justify-content: center和align-items: center实现真居中 - 子元素（即弹窗主体）无需设宽高，靠
max-width和max-height控制上限，内容多时自动收缩 - 移动端触发时若键盘弹出，
flex布局仍能保持垂直居中，而absolute容易贴顶或消失
max-width 和 max-height 必须配 overflow-y: scroll
很多团队只写 max-height: 80vh 却不设滚动，结果小屏下内容直接被裁掉。关键点是：滚动行为必须显式声明，不能依赖 auto 的“智能判断”：
- 始终用
overflow-y: scroll，而非auto—— 它强制保留滚动轨道，避免缩放后轨道消失导致无法拖动 -
max-width推荐用90vw（非固定像素），确保窄屏下不溢出视口；max-height用85vh留出系统状态栏/键盘空间 - 如果弹窗内含
textarea或长列表，额外加min-height: min-content防止高度塌陷
媒体查询只调布局结构，不重写定位逻辑
别在每个断点里重复写 top/left 偏移量。Flex + Grid 已足够应对多数场景，媒体查询应聚焦于：
- 小屏（
max-width: 767px）：改用flex-direction: column，让标题、正文、按钮垂直堆叠；取消左右 padding，用padding: 16px统一内边距 - 中屏（
768px–1023px）：启用grid-template-columns: 1fr 2fr分割表单标签与输入框，提升可读性 - 大屏（
min-width: 1024px）：允许弹窗宽度达600px，但需加margin: 0 auto防止贴左；禁用width: 100%，否则会撑满全屏
移动端要禁用背景滚动，但不能靠 body { overflow: hidden }
直接锁 body 会导致 Safari 滚动回弹异常、页面跳回顶部。正确做法是给遮罩层（.modal-overlay）加 touch-action: none，并用 overscroll-behavior: contain 阻断穿透：
- 遮罩层设置
overscroll-behavior: contain，阻止用户滑动弹窗时触发背景滚动 - 弹窗主体内部加
overscroll-behavior: none，防止滚动到底部再拉扯触发刷新 - 避免监听
touchmove手动preventDefault，iOS 16+ 对该行为有严格限制，易导致手势失灵
真正难的不是写多少媒体查询，而是理解哪些样式该由布局模型兜底、哪些必须靠显式声明来对抗浏览器默认行为。比如 overflow-y: scroll 看似简单，却是解决缩放后滚动失效最稳定的一招——它不依赖 JS 计算高度，也不受 viewport 缩放因子影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
