为何CSS媒体查询中的min-width与max-width不生效？

嘿，我来帮你揪出这个媒体查询的问题！你设置了min-width想让页面保持在理想宽度但没生效，大概率是这几个常见坑在搞怪，咱们一个个排查：

• 检查视口元标签是否存在
  这是移动端媒体查询最容易忽略的点！如果你的HTML头部没有添加视口标签，浏览器会用桌面端的默认视口宽度来渲染，媒体查询根本不会触发。赶紧在<head>里加上：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 确认媒体查询的语法和范围设置
  你给的代码只设置了min-width:320px，如果要限定在某个宽度范围（比如320px到768px之间），得同时用min-width和max-width，并且用and正确连接，比如：

  @media only screen and (min-width: 320px) and (max-width: 768px) {
    body {
      /* 你的样式 */
    }
  }
  

  另外注意语法细节：括号、and前后的空格都不能错，少个括号或者漏写and都会导致查询失效。

• 排查样式优先级冲突
  有没有其他CSS规则覆盖了body的min-width？比如更具体的选择器（比如.container body）、inline样式，或者带!important的规则？打开浏览器开发者工具（F12），选中body元素，查看“计算样式”面板，看看min-width是不是被划掉了——如果是，就说明有更高优先级的规则在捣乱。

• 检查内容是否撑开页面
  如果body里有长文本、无换行的字符串，或者宽度固定的图片，这些内容可能会直接撑开页面，无视你设置的min-width。可以给这类元素加限制：

  /* 让长文本自动换行 */
  p, div {
    overflow-wrap: break-word;
    max-width: 100%;
  }
  /* 限制图片宽度不超过容器 */
  img {
    max-width: 100%;
    height: auto;
  }
  

• 确认媒体查询的顺序
  CSS是“后写的规则覆盖先写的”，如果你的媒体查询是从小到大排列，但后面的查询（比如min-width:768px）里又设置了不同的宽度规则，就会覆盖前面的。要确保查询顺序符合你的需求，比如从窄屏到宽屏依次编写。

附上你提供的代码片段方便参考：

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 
  body { 
    margin-top: 10px; 
    margin-bottom: 10px; 
    min-width: 300px; 
    line-height: 1.0em; 
    font-family: 'Times New Roman', Times, serif; 
    font-size: 4px; 
  } 
  /* 其他样式... */
}

最后建议用浏览器的设备模拟工具（F12里的“设备工具栏”）切换不同屏幕宽度，实时查看媒体查询是否触发，以及body的样式是否正确应用。

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