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

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

前端

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


@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 收藏

反馈

2 条解答

UP主～梓涵 Lv1

你这问题其实挺常见的，别急，我猜你可能漏了 viewport meta 标签。

媒体查询本身写法没问题，顺序也没问题（虽然一般建议从小到大写，但你现在这样也不会出问题），关键在于移动端浏览器没按真实设备宽度渲染——默认它会按 980px 宽去渲染页面，所以 max-width: 600px 根本不会触发。

先确认下你的 HTML 里有没有加这个：

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

没加的话加进去，加了的话检查下有没有写成 width=1024 之类的固定宽度——这种也会导致媒体查询失效。

另外你代码里少了个闭合的大括号 }，虽然浏览器可能自动补全了，但最好补上：

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

  .nav {

    flex-direction: column;

    background: red;

  }

}

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

  .nav {

    flex-direction: row;

    background: blue;

  }

}

再补一句：如果本地调试用的是 Chrome DevTools 的手机模拟器，记得关掉「Disable cache」和「Preserve log」这些可能干扰渲染的选项，有时候缓存或者缩放比例没重置也会导致样式不刷新。

要是加了 viewport 还是不行，把你的完整 HTML 结构贴出来，我帮你看看是不是其他地方覆盖了样式——比如有没有全局的 flex-direction: row !important 之类的。

2026-02-27 12:12

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