这可能是最全的总结：css 媒体查询@media 不生效的原因

媒体查询不生效可能由多种原因引起，以下是可能导致媒体查询不起作用的常见原因：

样式覆盖（这个应该是重灾区）

css 文件中后面的 CSS 规则可能覆盖了媒体查询中的样式。请确保媒体查询的 CSS 代码没有被其他选择器或更高优先级的样式覆盖。通常将媒体查询放置在 CSS 文件的较底部可减少这种情况。

一定要搞清楚媒体查询中的选择器的优先级，无论是媒体查询放在最外层还是内层，一定！一定！一定！要确保媒体查询中设置选择器时候比外面要高，至少是同级而且同级的时候位置还得靠后，最好放在 css 文件末尾，这个时候同级的选择器后面的样式可以覆盖覆盖前面的，减少错误率。

css 中选择器优先级（这个知识点一定要会）

在 CSS 中，优先级是由四个层面决定的：内联样式、ID 选择器、类选择器/属性选择器/伪类、元素选择器/伪元素，按照从高到低的顺序排列。每层的数量也会影响优先级，数量越多，该层的优先级越高。此外，!important 规则会覆盖所有非 !important 的规则，不论其位置或选择器的特异性。

在媒体查询中提升优先级的最简便的方式就是采用多级选择器的方式。
例如，假设 menu 外面有一层 nav，我们要实现的效果是：在屏幕宽度大于 300px 时不显示 menu，小于 300px 的时候显示 menu 的内容。样式大概是：

<nav>
  <div class="menu">menu</div>
</nav>

媒体查询生效的情况

同级时媒体查询放在后面

css代码和嵌套量少的时候，直接在根部

.menu {
  display: none;
}
@media screen and (max-width: 300px) {
  .menu {
    display: block;
  }
}

下面这种也推荐用，代码量多嵌套深的时候，就是在父元素标签下写.menu 并且在他的后面写他的媒体查询,这样的话代码分布会规整一些

nav {
  .menu {
    display: none;
  }
  @media screen and (max-width: 300px) {
    .menu {
      display: block;
    }
  }
}

媒体查询中使用多级标签

因为多级标签比单个标签优先级高，这个时候媒体查询的的位置可以随便放，因为他会在屏幕小于 300px 时一定生效：

.menu {
  display: none;
}
@media screen and (max-width: 300px) {
  nav .menu {
    display: block;
  }
}

或者

@media screen and (max-width: 300px) {
  nav .menu {
    display: block;
  }
}
.menu {
  display: none;
}

不生效的例子

媒体查询外面使用的是高优先级（划重点）

外面使用多级选择器，媒体查询内部不使用，就算你把媒体查询放到 css 末尾也不会生效：

nav .menu {
  display: none;
}
/*上面的效果等价于下面这种写法，这个容易注意不到*/
nav {
  .menu {
    display: none;
  }
}
/* 媒体查询不会生效 */
@media screen and (max-width: 300px) {
  .menu {
    display: block;
  }
}

语法错误

确保媒体查询的语法正确无误，包括括号、大括号、分号以及关键字的正确使用。例如，@media screen and (max-width: 640px) 中的 and 后面必须有空格。

​CSS 加载顺序

确保链接或导入的 CSS 文件顺序正确，特别是当使用外部样式表时，媒体查询可能位于未被正确加载的文件中。

Meta 标签缺失

在 HTML 文档的部分缺少必要的：

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

这会影响移动设备上媒体查询的正确解析。我实测在 PC 上，如果删掉这个的话，有时候媒体查询仍然是生效的，其他设备还没测过。

条件不匹配

检查媒体查询中的条件是否与当前查看环境匹配。例如，如果你设置的是(max-width: 768px)，但浏览器窗口或设备的宽度大于这个值，那么对应的样式将不会应用。

设备仿真不准确

在某些开发工具中，设备仿真可能不完全准确，导致你以为媒体查询未生效，实际上在真实设备上是正常的。

媒体类型错误

如果指定了错误的媒体类型，你如果使用了 print 而没有使用 screen(或者直接省略也可以)可能也是不生效。例如

.menu {
  display: none;
}

/*不生效*/
@media print and (max-width: 375px) {
  .menu {
    display: block;
  }
}

有收获的话可以点个赞哟。

​