小屏弹窗适配需全局设置box-sizing: border-box、组合width与max-width、约束内部内容、遮罩层用fixed定位并挂载至body。
因为弹窗容器的 width、padding、transform 和父级 box-sizing 四者没对齐小屏视口的计算逻辑，不是“设小点就行”，而是盒模型和定位基准同时失准。
box-sizing: border-box 没全局生效
几乎所有小屏右侧被裁、按钮消失的问题，根源都在这里。默认 content-box 下，你写的 width: 90% 还要额外加 padding: 20px 和 border: 1px，实际宽度可能达到 90% + 42px，iPhone SE（375px）直接溢出。
- 必须写
*,*::before,*::after { box-sizing: border-box; }，只给弹窗加没用 - 在开发者工具「Computed」里确认目标元素的
box-sizing真的是border-box，别被 Bootstrap 或重置样式覆盖 - 伪元素（比如用
::before做遮罩）漏掉就等于留了个溢出口
width: 90% 和 max-width: 500px 没组合使用
单写 width: 90% 在 iPad 上太窄；单写 max-width: 500px 在手机上照旧溢出。二者缺一不可，且需配合居中逻辑。
- 推荐写法：
width: 90%; max-width: 500px; margin: 20px auto; - 对
position: fixed弹窗，margin: auto失效，得改用left: 20px; width: calc(100% - 40px); -
clamp(300px, 90%, 500px)更平滑，但 IE 全系不支持，iOS Safari 13.1+ 才可用
内部内容完全没约束
盒子再稳，一张没加 max-width: 100% 的图片、一串无空格的 URL、一个没设 width: 100% 的 <input>，都会直接撑破边界——这不是弹窗问题，是内容失控。
-
img必须加max-width: 100%; height: auto; - 长单词或 URL 加
word-break: break-word;（overflow-wrap在部分 Android 浏览器不认） -
<input>、<textarea></textarea>显式设width: 100%，否则默认行为会继承不可靠的计算值 - 弹窗根容器建议加
overflow: hidden，滚动区域单独用max-height: 80vh+overflow-y: auto
遮罩层和 DOM 挂载位置错了
遮罩层只写 width: 100%; height: 100%，结果在滚动页里漏出背景；弹窗挂在嵌套 div 下，父级 transform 直接截断定位上下文——这两处错，CSS 再怎么调都白搭。
- 遮罩层必须用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，100%是相对父容器，不可靠 - 弹窗 DOM 必须挂载到
document.body下，避免父级transform或overflow截断定位包含块 - 遮罩层背景用
background-color: rgba(0, 0, 0, 0.5)，别用opacity，否则弹窗也变透明
最常被忽略的是：transform: translate(-50%, -50%) 只管位置，不管尺寸是否撑爆；而 max-height: 80vh 失效，往往是因为父容器没高度上下文——这两点不查「Computed」面板，光看代码根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
