媒体查询在手机和桌面设备上没生效怎么办？

极客淑瑶提问于 2026-02-16 10:23:28 阅读 20

前端

我在给网站做响应式布局时，写好了媒体查询，但手机和桌面样式完全没变化。比如这个导航栏，想让手机端显示汉堡菜单，桌面端显示横向菜单：


@media screen and (max-width: 600px) {
  .nav {
    flex-direction: column;
    background: red;
  }
}
@media screen and (min-width: 601px) {
  .nav {
    flex-direction: row;
    background: blue;
  }

我已经检查过浏览器开发者工具的模拟器，两个媒体查询都被正确加载了，但无论手机还是桌面都只显示蓝色横向菜单。是不是媒体查询的顺序有问题？或者断点设置哪里错了？

CSS3

我来解答赞 7 收藏

反馈

1 条解答

Top丶鑫平 Lv1

这个问题我之前踩过坑，说起来都是血泪教训。你遇到的情况大概率是CSS优先级的问题，而不是媒体查询的顺序或者断点设置错了。

首先，你的代码逻辑看起来没问题，媒体查询的条件也写得很清楚，但问题出在两个媒体查询的选择器优先级是一样的，而CSS在冲突时会按照后来者居上的原则覆盖前面的样式。也就是说，后面的 @media screen and (min-width: 601px) 的样式覆盖了前面的 @media screen and (max-width: 600px) 的样式，所以无论在哪种设备上，蓝色横向菜单都会生效。

解决办法很简单，把这两个媒体查询的顺序调换一下就行，让小屏幕的样式写在后面：



@media screen and (min-width: 601px) {

  .nav {

    flex-direction: row;

    background: blue;

  }

}

@media screen and (max-width: 600px) {

  .nav {

    flex-direction: column;

    background: red;

  }

}

这样，在小屏幕设备上，max-width: 600px 的规则就会覆盖掉前面的 min-width: 601px 的规则，导航栏就能正常显示红色的汉堡菜单了。

另外还有一个建议，检查一下你的HTML文件里是不是有类似的标签。如果没有这个标签，很多手机浏览器会默认以桌面模式渲染页面，导致媒体查询完全不生效。我当时就是因为忘记加这个标签，折腾了大半天。

总结一下，先调整媒体查询的顺序，再确认 viewport 标签有没有加，基本就能解决问题了。希望你能少走点弯路，别像我当初那样被这玩意儿折磨得怀疑人生。

2026-02-16 11:00