媒体查询移动端失效，自定义类Bootstrap模态框DIV溢出问题求助

嘿，我来帮你搞定这个模态框移动端溢出的问题，顺便分享些实用的优化思路～

大概率是这几个原因导致的，你可以对照检查下：

• 固定宽度没做响应式限制：如果你的模态框写了固定宽度（比如width: 600px），当移动端屏幕宽度小于这个值时，模态框自然会超出视口。没有用max-width来限制它的最大宽度是核心问题之一。
• 盒模型没设置正确：如果没加box-sizing: border-box，模态框的padding和border会额外增加总宽度，就算你设置了宽度，实际显示也会超出预期。
• 内容没有换行处理：模态框里的长单词、连续字符或者宽元素（比如图片），如果没做自适应或换行，会直接撑破容器，导致溢出。
• 居中方式的小漏洞：如果用left: 50% + transform: translateX(-50%)居中，但没限制最大宽度，当屏幕变窄时，模态框的一半会跑到视口外。

这里给你一套响应式模态框的优化方案，直接就能用：

1. 核心布局样式（解决溢出问题） #

先给模态框容器加上这些关键样式，从根源避免溢出：

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  /* 精准居中，不会受元素宽高影响 */
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  /* 桌面端固定宽度，移动端自动收缩 */
  width: 600px;
  /* 关键：最大宽度不超过视口的90%，留足边距 */
  max-width: 90vw;
  /* 限制最大高度，内容过多时允许滚动 */
  max-height: 90vh;
  overflow-y: auto;
  /* 确保padding和border不会增加总宽度 */
  box-sizing: border-box;
  z-index: 1000;
}

2. 内容自适应处理 #

防止内部元素撑破模态框：

/* 长文本自动换行 */
.modal-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 图片自适应容器宽度 */
.modal img {
  max-width: 100%;
  height: auto;
}

3. 遮罩层配套优化 #

遮罩层要完全覆盖视口，同时避免背景滚动：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* 打开模态框时，禁止背景滚动 */
body.modal-open {
  overflow: hidden;
}

4. 移动端交互细节优化 #

• 给模态框加个右上角的关闭按钮，设置足够大的点击区域（比如width: 44px; height: 44px），方便移动端点击
• 支持点击遮罩层关闭模态框，提升操作便捷性
• 模态框内的按钮、输入框等交互元素，也要保证最小点击区域，符合移动端交互规范

5. 无障碍访问增强 #

• 给模态框添加aria-modal="true"、role="dialog"属性，方便屏幕阅读器识别
• 打开模态框时，将焦点自动转移到模态框内的关闭按钮，关闭时恢复之前的焦点位置

内容的提问来源于stack exchange，提问作者Alberto Siurob