CSS中max-width媒体查询不生效仅min-width生效问题咨询

你提供的CSS代码语法本身没有错误，出现该问题通常是以下几种原因导致：

• 缺少viewport视口配置标签
  这是最常见的诱因，需要在HTML的<head>节点内添加如下配置：

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

  未添加该标签时，浏览器默认会使用980px作为逻辑视口宽度，远高于你设置的500px阈值，导致max-width规则始终无法触发。
• 存在更高优先级的样式覆盖
  检查项目中其他CSS规则、行内样式是否有给body设置background-color的逻辑，尤其是带!important标识的规则，优先级会高于你写的媒体查询样式。
• 视口实际宽度未满足阈值要求
  可以在浏览器控制台执行console.log(window.innerWidth)查看当前实际逻辑视口宽度，确认数值是否小于等于500px；如果浏览器开启了非100%的页面缩放比例，也会改变逻辑视口宽度，需要调整到100%后再测试。
• 媒体查询排列顺序错误
  虽然你当前给出的代码顺序符合要求（默认样式→max-width规则→min-width规则），但如果实际项目中你把max-width的媒体查询写在了其他同权重body样式的前面，会被后续规则覆盖，建议统一按阈值从小到大或从大到小的顺序排列媒体查询。

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