CSS媒体查询未生效：默认CSS覆盖媒体查询问题求助

这问题我碰到过好多次，大概率是CSS优先级或者加载顺序的锅，咱们一步步排查解决：

1. 先检查CSS文件的加载顺序 #

CSS的规则是后加载的样式会覆盖先加载的同优先级样式。如果你把包含媒体查询的CSS文件放在默认样式文件前面引入，那肯定会被默认样式盖过去。

举个正确的引入例子：

<!-- 先引入默认基础样式 -->
<link rel="stylesheet" href="styles.css">
<!-- 再引入包含媒体查询的响应式样式 -->
<link rel="stylesheet" href="responsive.css">

如果是用Gulp合并多个Sass文件，一定要把媒体查询相关的Sass文件放在编译顺序的最后，这样合并后的CSS里，媒体查询代码会出现在默认样式之后。

2. 提升媒体查询样式的优先级 #

如果加载顺序没问题，但样式还是被覆盖，那就是选择器优先级不够。比如默认样式用了h1，媒体查询里也是h1，优先级相同的情况下，后面的样式生效——但如果你的媒体查询代码在默认样式前面（比如合并顺序错了），就会被覆盖。

解决方法：

• 用更具体的选择器：给媒体查询里的选择器加父元素，提升优先级，比如：

  @media (max-width: 768px) {
    /* 增加body父选择器，优先级比单独h1高 */
    body h1 {
      font-size: 3rem;
      color: #ff0000;
    }
  }
  

• 避免滥用!important：虽然加!important能强制生效，但会让后续样式调试变麻烦，除非紧急情况不建议用：

  @media (max-width: 768px) {
    h1 {
      font-size: 3rem !important;
    }
  }
  

3. 检查Sass嵌套与媒体查询结构 #

如果你习惯在Sass里把媒体查询嵌套在选择器内部（比如下面这样）：

h1 {
  color: #E5E1DD;
  /* 其他默认样式 */
  @media (max-width: 768px) {
    font-size: 3rem;
  }
}

编译后的CSS会自动把媒体查询放在默认样式后面，理论上应该生效。如果还是不生效，要检查：

• 媒体查询的断点是否正确：比如是不是写了min-width而不是max-width，或者数值设置错误（比如把768写成1768）；
• 浏览器窗口宽度是否真的触发了媒体查询条件。

4. 清除浏览器缓存 #

有时候你修改了CSS，但浏览器还在加载旧的缓存文件，导致看不到新样式。可以：

• 强制刷新页面（Windows按Ctrl+F5，Mac按Cmd+Shift+R）；
• 在CSS文件链接后加版本号，强制浏览器加载新文件：

  <link rel="stylesheet" href="styles.css?v=1.1">
  <link rel="stylesheet" href="responsive.css?v=1.1">
  

5. 用开发者工具排查 #

打开浏览器的开发者工具（按F12），找到对应的元素（比如你的h1），查看「Styles」面板：

• 如果媒体查询的样式被划掉了，说明要么优先级不够，要么媒体查询条件没满足；
• 可以切换到设备视图，或者手动拖动窗口宽度，看媒体查询的样式是否会被激活。

举个适配你代码的例子：
假设你的styles.scss是默认样式，新建一个responsive.scss放媒体查询：

// responsive.scss
@media (max-width: 768px) {
  h1 {
    font-size: 3rem;
    margin-top: 50px;
  }
}

确保Gulp编译时把responsive.scss放在styles.scss之后，或者HTML里后引入responsive.css，这样媒体查询的样式就能正确覆盖默认样式了。

内容的提问来源于stack exchange，提问作者Gabriel Morais