Chrome及微软Edge浏览器Media Screen媒体查询不生效问题求助

问题核心原因 #

• 存在明显的媒体查询范围逻辑错误：第二个查询规则要求同时满足最大宽度≤324px和最小宽度≥427px，不存在符合该条件的设备，永远不会触发
• 大概率存在上游CSS语法错误：如果媒体查询代码完全没有出现在DevTools样式面板中，说明浏览器没有正常解析这段代码，通常是前面的CSS规则遗漏了大括号、分号等符号，导致后续代码全部失效
• 样式优先级不足：如果查询规则出现在DevTools但被划掉，说明选择器权重低于第三方框架（如Bootstrap）的同属性样式，被覆盖
• CSS文件加载异常：自定义样式文件加载失败、被缓存也会导致修改不生效

解决方案 #

1. 修正逻辑错误的媒体查询范围
   根据你的实际适配需求修改第二个查询规则，比如要适配宽度在324px到427px之间的设备，调整为：

@media only screen and (min-width:324px) and (max-width:427px) 
{
/* 你的自定义样式 */
}

2. 排查CSS语法错误
   注释掉当前style.css中媒体查询之前的所有自定义代码，写入测试代码验证媒体查询本身是否生效：

@media (max-width: 1326px) and (min-width: 1025px) {
  body {
    background: red !important;
  }
}

调整浏览器窗口宽度到1025px-1326px区间，观察页面背景是否变红：

• 变红：说明你之前的上游CSS存在语法错误，逐段恢复代码排查漏写的符号即可
• 不变红：继续往下排查

3. 确认样式优先级
   如果测试代码生效但业务代码不生效，检查选择器权重，可通过提高选择器层级、添加!important临时验证是否是优先级问题，后续再优化选择器写法避免滥用!important。

4. 排查加载和缓存问题

• 打开DevTools网络面板，确认css/style.css返回200状态码，没有加载失败
• 按Ctrl+Shift+R强制刷新浏览器，清除本地缓存后再验证
• 确认浏览器页面缩放比例为100%，避免缩放导致视口宽度计算偏差

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