CSS媒体查询设置的display属性无法覆盖原有样式如何解决

• 缺少viewport元标签
  移动端页面如果没有在<head>中加入viewport配置，浏览器会默认按设备物理像素计算宽度而非实际视口宽度，导致媒体查询不触发，添加以下代码即可：

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

• 媒体查询代码顺序错误
  CSS优先级相同的情况下，后加载的样式会覆盖先加载的样式，如果你的媒体查询代码写在了默认.test类样式的前面，默认样式就会覆盖媒体查询内的样式，需要将媒体查询代码放到默认样式之后。
• 存在更高优先级的样式冲突
  检查是否有其他优先级更高的样式指定了.test的display属性：比如行内样式style="display: flex"、选择器权重更高的规则（如div.test、body .test等）、其他范围重叠的媒体查询规则，都会覆盖当前媒体查询的样式。
• 媒体查询语法解析异常
  虽然注释理论上不影响语法解析，但可以尝试去掉媒体查询规则里的注释，改用标准写法测试：

  @media only screen and (max-width: 437px) {
    .test {
        display: grid;
    }
  }
  

• 视口宽度计算偏差
  部分浏览器的视口宽度统计包含滚动条宽度，如果你调整窗口时刚好卡在阈值附近，滚动条的宽度会导致媒体查询未触发，可以临时把max-width调整为450px测试是否能正常触发。
• 浏览器缓存问题
  部分浏览器会缓存旧的CSS文件，修改代码后可以按Ctrl+F5强制刷新页面，或者开启开发者工具的禁用缓存选项后重新测试。

内容的提问来源于stack exchange，提问作者Soner from The Ottoman Empire