弹窗小屏截断的核心解法是用max-width替代width并用transform居中：width设90%弹性收缩，max-width设480px防平板过宽，配合position:fixed+transform:translate(-50%,-50%)精准居中，避免top/left硬调导致偏移。
弹窗在小屏幕被截断？不是宽度写太死，就是居中逻辑没对齐。核心就两条：用 max-width 替代 width，用 transform 居中而非 top/left 硬调。
为什么 width: 500px 在 iPhone 上一定出问题
iPhone SE 屏宽仅 375px，width: 500px 直接溢出，触发横向滚动条或内容被裁切。这不是“适配没做好”，是基础尺寸逻辑错了。
- 永远优先用
width: 90%起步，让弹窗随视口弹性收缩 - 加
max-width: 480px防止在平板横屏（比如 iPad 1024px）撑得太开 - 别写
min-width: 300px—— 折叠屏窄态下会强制拉伸文字，破坏可读性 - 弹窗内表单控件（如
<input>）必须同步设width: 100%，否则它会撑破父容器
transform: translate(-50%, -50%) 居中失效的常见原因
代码看着没错，但弹窗就是偏了——大概率不是 transform 有问题，而是参照系错了。
-
position: absolute或position: fixed必须显式声明，否则top: 50%没参照 - 如果用
position: absolute，父容器得有position: relative，否则它往上找最近的已定位祖先，可能跑到 body 外 - 用
position: fixed更稳妥，直接相对于视口定位，top: 50%; left: 50%+transform就能稳居中心 - 调试时加一句
outline: 1px solid red，立刻看清真实盒模型边界，比肉眼猜准得多
@media 查询别只盯 768px
单纯写 @media (max-width: 768px) 会漏掉大量真实场景：iPad 竖屏是 768px，横屏却有 1024px；安卓折叠屏展开后可能达 1200px，但仍是触控环境。
- 优先用
@media (max-width: 480px)处理手机窄屏，这是绝大多数小屏临界点 - 补一条
@media (hover: none) and (pointer: coarse)捕获纯触控设备，比查宽度更可靠 - 所有移动端规则统一写在 CSS 文件末尾，靠层叠覆盖，默认样式在前，移动优化在后
- 避免嵌套多层媒体查询，CSS 是顺序覆盖逻辑，嵌套容易误判生效条件
遮罩层点击没反应？先看 touch-action 和 z-index
iOS Safari 下，遮罩层点不中，常以为是 JS 绑定问题，实际是 CSS 层叠或事件拦截导致。
-
.modal-overlay必须设z-index显式值（比如z-index: 1000），不能依赖默认 - 加
touch-action: none，防止 iOS 默认手势（比如拖拽）劫持点击事件 - 隐藏时别只用
opacity: 0，得配合visibility: hidden或display: none，否则仍会拦截事件 - 软键盘弹出时
100vw会变小（Safari 特性），所以max-width别依赖90vw，改用min(800px, 90vw)，老浏览器 fallback 用媒体查询
真正难的不是写出居中代码，而是让弹窗在键盘弹起、折叠屏切换、缩放字体、甚至系统开启减少动画时，依然保持位置稳定、内容可读、交互可达——这些细节不测到真机，光靠模拟器永远发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
