如何阻止网页缩放时元素尺寸变化、布局错位溢出？

你当前的样式有5个直接导致缩放错乱的问题：

• 容器硬编码固定height: 600px，未做溢出处理，窗口缩小时内容总高度超过600px就会溢出到容器外部
• img标签未设置宽度约束，会按原生分辨率渲染，窗口宽度小于图片原生宽度时必然超出容器边界
• 未配置文本折行规则，小尺寸下长文本、连续字符不会自动换行，会横向溢出
• 代码末尾h4的样式规则缺失闭合大括号，属于CSS语法错误，会导致后续加载的样式全部失效
• 未全局配置盒模型规则，元素的padding、border会额外增加元素总宽度，容易把容器撑破

直接替换你原来的样式即可：

* {
  box-sizing: border-box;
}
body {
  background-color: #ADD8E6;
  padding: 10px;
  margin: 0;
  min-width: 320px;
}
.hcontainer {
  background-color: #FFFFE0;
  min-height: 600px;
  text-align: center;
  overflow: auto;
}
div h1, p {
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 5px;
  margin: 0;
  word-wrap: break-word;
  word-break: break-word;
}
img {
  margin: 0;
  padding-top: 20px;
  max-width: 100%;
  height: auto;
}
#mini {
  font-size: 13px;
  margin-top: 5px;
}
.imgcontainer {
  background-color: pink;
  padding: 0 10px;
  overflow: hidden;
}
.mcontainer {
  background-color: #FFFFE0;
  min-height: 600px;
  margin-top: 20px;
  padding-top: 30px;
  overflow: auto;
}
li {
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word;
}
h3 {
  text-align: center;
}
.list {
  width: 50%;
  min-width: 280px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
}
h4 {
  text-align: center;
  padding-top: 20px;
}

• 全局设置box-sizing: border-box，所有元素的内边距、边框都会算在设定的宽度/高度内，从根源避免元素被padding撑出容器
• 把两个内容容器的固定height改成min-height，内容少时保持600px高度，内容多时容器自动向下撑开，不会出现内容溢出到容器外的情况；如果需要严格固定容器高度，把min-height改回height即可，保留的overflow: auto会让超出内容在容器内生成滚动条，不会乱跑
• 给图片加max-width: 100%; height: auto，图片永远不会超出父容器宽度，且会等比缩放，不会变形
• 给文本类元素加折行规则，小窗口下文本会自动换行，不会横向溢出
• 补全了原代码缺失的h4样式闭合大括号，修复语法错误
• 给列表加最小宽度限制，避免窗口过窄时列表区域太窄导致内容挤成一团
• 给body加最小宽度320px，避免窗口缩到极端尺寸时布局完全崩坏，可根据实际需求调整这个数值

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