移动端弹窗适配需width与max-width组合（如width:90%;max-width:480px）、margin:20px auto居中，禁用min-width；内容需img加max-width:100%、长文本word-break:break-word、表单width:100%；小屏用媒体查询降级padding/font-size等；遮罩用fixed全屏，弹窗挂body下并避免父级transform影响z-index。
移动端弹窗超出屏幕，核心问题不是“没居中”，而是宽度、定位、内容约束三者脱节。只改 width 或只加 overflow: hidden 都会失效。
用 width + max-width 组合控制容器尺寸
固定像素值（如 width: 500px）在 iPhone SE（CSS 宽度仅 375px）上必然右溢出。但单写 width: 90% 在 iPad 上又太窄。必须两者共存：
-
width: 90%保证小屏有安全边距，避免贴边 -
max-width: 480px防止大屏撑开影响可读性 - 必须配
margin: 20px auto，否则 Safari 下右侧仍可能被裁切 - 禁用
min-width——折叠屏窄态下它会强制拉伸，破坏流式逻辑
防止内部元素撑破边界
弹窗容器缩好了，图片、长 URL、表单仍可能横向突破。这不是 bug，是 CSS 默认行为：
-
img必须加max-width: 100%和height: auto - 长单词或技术字符串（如哈希、URL）用
word-break: break-word；overflow-wrap: break-word在部分 Android 浏览器不生效 -
input、textarea显式设width: 100%，否则默认继承计算值，常导致横向滚动 - 根容器加
overflow: hidden，滚动区域单独用max-height+overflow-y: auto
小屏下视觉密度要重调，不能只缩宽度
宽度适配了，但 padding: 30px、font-size: 24px、height: 48px 这些参数在手机上依然会造成拥挤或点不准：
- 媒体查询里统一降级：
@media (max-width: 480px)下把padding改为16px，标题font-size改为18px，正文用14px - 按钮高度同步缩到
36px，保持比例协调；禁用line-height: 24px这类固定值，改用无单位数值（如line-height: 1.4） - 慎用纯
vw单位字体——iPhone SE 上4vw会缩到 12px；改用font-size: clamp(14px, 4vw, 18px)
遮罩层和定位层级容易被忽略
遮罩没铺满、弹窗被父级 transform 截断、z-index 失效，这些问题往往在真机上才暴露：
- 遮罩层必须用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh，100%不可靠 - 弹窗 DOM 必须挂载到
body下，若其父级有transform、perspective或filter，fixed定位会降级为 relative -
z-index必须显式声明足够高（如z-index: 1050），且遮罩和弹窗需在同一 stacking context 中 - iOS 键盘弹出时
visualViewport.height缩小，top: 50%+transform的定位会浮高——此时仅靠 CSS 无效，需 JS 微调
真正麻烦的不是某一行 CSS 写错，而是改了父组件一个 transform: scale(0.95)，弹窗就偏了 20px 却查不出原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
