小屏幕弹窗适配需结合 width: 90% 与 max-width: 500px，并设 margin: 20px auto 居中；小屏下用媒体查询调小 padding、font-size 和按钮高度；图片加 max-width: 100%；长文本用 word-break: break-word；可选 clamp(300px, 90%, 500px) 实现流体缩放。
小屏幕下弹窗超出视口，核心是让弹窗宽度自适应且不突破屏幕边界。只设固定宽度（如 width: 500px）必然溢出，关键在于用相对单位约束最大宽度，并配合内边距与缩放逻辑。
用 max-width 代替 width
直接设置 width: 90% 虽能缩放，但在大屏上可能过窄；而只设 max-width: 500px 又在小屏失效。正确做法是两者结合：
-
width: 90%—— 保证小屏下有足够内边距，内容不贴边 -
max-width: 500px—— 防止大屏下弹窗过宽、影响阅读体验 - 同时加
margin: 20px auto居中，避免右侧被裁切
适配移动端需重设 padding 和 font-size
大屏弹窗的内边距和字号在手机上会显得空旷或难读。建议用媒体查询微调：
- 小屏（如
max-width: 480px）：把padding从30px降到16px - 标题字号从
24px缩至20px，正文从16px改为14px - 按钮高度同步缩小（如
height: 40px→36px），保持比例协调
防止内容撑破弹窗：给内部元素加约束
图片、长文本、表格等容易突破弹窗边界。需额外控制：
立即学习“前端免费学习笔记（深入）”；
- 图片统一加
max-width: 100%; height: auto; - 长单词或URL用
word-break: break-word;或overflow-wrap: break-word; - 弹窗容器设
overflow: hidden;，内部滚动区域单独加max-height和overflow-y: auto;
可选增强：用 clamp() 实现流体缩放
如果希望更平滑地响应不同屏幕，可用 CSS 函数 clamp() 替代固定 max-width：
-
width: clamp(300px, 90%, 500px);—— 最小 300px，理想值 90%，上限 500px - 兼容性注意：IE 不支持，但现代主流浏览器（Chrome 78+、Firefox 75+、Safari 13.1+）均支持
- 适合对排版精度要求较高的弹窗，比如表单或详情卡片
