必须全局设置 box-sizing: border-box 并配合 width、max-width、calc() 组合约束及子元素显式宽度控制，才能解决缩放导致的弹窗表单变窄或溢出问题。
为什么缩放后弹窗表单突然变窄或溢出
页面缩放（Ctrl + / Cmd +）本身不改 CSS 规则，但会放大 sub-pixel 渲染误差。当弹窗用 width: 50% + padding: 16px + border: 1px 时，默认 box-sizing: content-box 会让实际宽度变成 ≈ 50.03%，缩放后浏览器四舍五入成 49% 或 51%，导致表单控件错位、右侧按钮被裁、输入框横向滚动——这不是 bug，是盒模型 + 渲染精度叠加的结果。
必须全局加 box-sizing: border-box
只给弹窗容器或表单加 box-sizing: border-box 不够。父级容器若有 padding，它的可用宽度已缩减；若父级仍用 content-box，子元素按 100% 算出的宽度照样溢出。
- 最稳妥写法：
*,*::before,*::after{box-sizing: border-box} - 若项目用了第三方 UI 库（如 Element Plus），先查它是否已设该规则；冲突时局部覆盖，别全局强刷
- 旧版 IE7 及以下不支持，需配合
width: calc(100% - 34px)手动减去padding和border总和
width + max-width + calc() 组合控制真实宽度
单独用 width: 90% 在 4K 屏上可能过宽，只写 width: 500px 在 iPhone SE 上必溢出。关键不是换单位，而是组合约束：
- 用
width: 90%保证小屏有边距、大屏不撑满 - 配
max-width: 480px防止平板/桌面端内容稀疏 - 若弹窗带左右
padding: 20px，且需紧贴视口边缘对齐，改用width: calc(100% - 40px)+left: 20px更精准 - 避免
min-width: 300px—— 折叠屏窄态下会强制拉伸，破坏流式布局
表单内部元素必须显式约束
弹窗容器缩好了，input、textarea、select 还是容易撑破边界，因为它们默认 width 行为不一致：
-
input和textarea必须设width: 100%，否则继承的是浏览器默认计算值（常为 130px 左右），在缩放下更不可控 -
img在弹窗里要加max-width: 100%+height: auto，否则原始尺寸顶破容器 - 长 URL 或 JSON 字符串加
word-break: break-word，overflow-wrap在部分 Android 浏览器中不生效 - 整个弹窗根容器建议加
overflow: hidden，滚动区域单独用max-height+overflow-y: auto
缩放异常最常被忽略的点：不是弹窗本身没设对，而是它的父容器、表单子元素、甚至伪元素都还在用 content-box；calc() 里的数值没考虑 border 和 padding 是否已被纳入计算——三者缺一，缩放后就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
