模态窗宽度用%撑满全屏，主因是父容器无明确宽度或模态窗未脱离文档流且缺max-width约束；应设父容器width/max-width、模态窗自身合理max-width（如min(800px,90vw)），并注意box-sizing、居中方式及键盘弹出时vw抖动问题。
模态窗宽度用 % 为什么经常撑满全屏？
因为父容器没设宽，或者模态窗本身没脱离文档流但又没限制最大宽度。浏览器对 width: 80% 的解释是“取父元素内容区宽度的 80%”，而如果父元素是 body 或 html（尤其在未设置 max-width 的情况下），它就真按视口宽度算——结果就是移动端也显示成超宽弹窗。
关键不是百分比错，而是缺少兜底约束和上下文控制。
- 确保模态窗的直接父容器有明确宽度（比如
width: 100%或max-width: 100%），否则百分比失去参照 -
max-width必须设在模态窗自身上，且值要合理：桌面端常用600px～800px，移动端建议用90vw或calc(100vw - 2rem) - 避免给父容器设
display: flex后忘记加flex-shrink: 0，否则子元素的%宽可能被压缩失效
max-width 设成 px 还是 vw？
两者不互斥，但混合用才稳。纯 px 在小屏下会溢出，纯 vw 在大屏下可能太窄——比如 max-width: 90vw 在 4K 屏上能到 3400px，显然不合适。
推荐写法是用 min() 函数（现代浏览器支持）或媒体查询降级：
立即学习“前端免费学习笔记（深入）”；
modal {<br> width: 90%;<br> max-width: min(800px, 90vw);<br>}- 不支持
min()的老浏览器（如 IE、旧版 Safari），用@media (min-width: 800px)单独覆盖max-width: 800px - 别用
100vw当max-width：它包含滚动条宽度，可能导致水平滚动条意外出现 - 如果模态窗带边框或内边距，用
box-sizing: border-box确保width和max-width包含它们
用 transform 居中时，width 百分比还生效吗？
生效，但容易误判效果。因为 transform: translate(-50%, -50%) 移动的是整个元素盒模型，而 width: 80% 仍基于父容器计算——只是你看到的位置变了，不代表宽度逻辑失效。
真正的问题常出在：居中容器没设 position: relative 或 absolute，导致 transform 参照错乱；或者父容器高度为 0，使垂直居中失效，让人误以为宽度也不对。
- 模态窗本体建议用
position: fixed，这样top: 50%+left: 50%+transform才可靠 - 如果用
flex居中（比如body设display: flex），width: 90%依然有效，但要注意flex-shrink: 0防止被压缩 - 调试时临时加
outline: 1px solid red看真实盒模型边界，比靠眼睛猜准得多
移动端键盘弹出时，vw 宽度突然变小怎么办？
这是 Safari 和部分安卓浏览器的常见行为：软键盘弹出会触发视口重算，100vw 变成“可视区域宽度”，而非设备物理宽度，导致 max-width: 90vw 突然缩成 300px 左右。
没有完美方案，但可规避最糟情况：
- 优先用
max-width: 800px+ 媒体查询控制，而不是依赖vw做主约束 - 如果必须响应视口，改用
max-width: min(800px, calc(100vh - 100px))，避开宽度抖动，转而参考高度（键盘通常只影响高度） - 监听
resize事件并 debounce，检测到window.innerHeight明显变小（比如 max-width
这事没法一劳永逸，得接受不同浏览器对“视口”的定义本来就不统一。真正上线前，务必在真机 Safari 和 Chrome 上反复点输入框测试。
