弹窗宽度超出屏幕应使用width: 90%与max-width: 480px组合约束，避免固定width导致iphone se等小屏溢出；遮罩层需加touch-action: none和z-index: 1000以上，内部表单元素设width: 100%，并用box-sizing: border-box防止错位。
弹窗宽度超出屏幕：用width和max-width组合约束
直接写width: 500px在 iPhone SE（375px 宽）上必然溢出，横向滚动或右侧截断。关键不是“缩多小”，而是让宽度随视口弹性收缩，同时保底可读性。
-
width: 90%是基础——留出左右边距，避免贴边 -
max-width: 480px是上限——防 iPad 横屏或大屏手机撑太开 - 别用
min-width: 300px——折叠屏窄态下会强制拉伸内容，破坏布局 - 内部
input、textarea必须同步设width: 100%，否则它们会撑破父容器
遮罩层点不中/点击穿透：检查touch-action和z-index
iOS Safari 下遮罩层(.modal-overlay)看似没响应，大概率是事件被下层劫持了，不是 JS 绑定问题，而是 CSS 交互属性缺失。
-
touch-action: none必须显式加在遮罩层上，禁用默认手势干扰 -
z-index要分层：遮罩层比如z-index: 1000，弹窗主体至少z-index: 1001，不能只靠顺序覆盖 - 别对遮罩层用
visibility: hidden或opacity: 0——它仍拦截点击；该用display: none彻底移出渲染树
底部固定弹窗错位：box-sizing和calc()缺一不可
写position: fixed; width: 100%却出现右侧按钮被裁、左侧留白，根本原因是 padding/border 默认不计入 width 计算。
- 必须加
box-sizing: border-box，把 padding 和 border 纳入 width 范围 - 若需两侧留白（如 15px），用
width: calc(100% - 30px)+left: 15px，而不是margin: 0 auto（fixed 元素不认 auto 外边距） - 避免混用 HTML 的
align="center"属性，它已过时且与 CSS 冲突
字体模糊/按钮热区偏移：别用transform: scale()
为适配小屏对整个弹窗加transform: scale(0.85)，会导致文字发虚、点击区域错位——这是高 DPR 屏幕像素对齐失效的典型表现。
- 改用
font-size: clamp(14px, 4vw, 18px)，让字号随视口平滑变化 - 按钮高度统一用
rem或em，避免px在 Retina 屏上渲染失真 - 如果真要缩放内容区，必须配
transform-origin: top left，否则边缘裁剪不可控
真正难的不是堆媒体查询，而是得随时记住：移动端没有“标准尺寸”，只有“此刻用户手里的那个尺寸”——所有值都该是上下文敏感的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
