媒体查询（Media Query）在嵌入式CSS中生效，外部CSS文件中失效

嘿，我来帮你排查这个问题——inline CSS里的媒体查询能正常工作，移到外部文件就失效，这种情况我碰过好多次，通常是以下几个原因导致的，咱们一个个来核对：

1. 外部CSS文件路径错误，根本没加载 #

这是最常见的问题！你可以打开浏览器开发者工具（按F12），切换到Network标签，刷新页面后找你的外部CSS文件：

• 如果看到状态码是404，说明文件路径写错了，比如相对路径没对应对（比如你把CSS放在css/style.css，但HTML里写的是style.css）
• 要是根本找不到这个文件，那就是引用标签写错了，检查<link rel="stylesheet" href="xxx.css">的href属性是否正确

2. 样式优先级冲突，外部规则被覆盖 #

媒体查询本身不会改变样式的优先级，但如果你的inline样式权重比外部媒体查询里的选择器高，就算媒体查询触发了，也会被inline样式盖过去。举个例子：

• Inline代码：<div class="box" style="background: white;">
• 外部CSS：@media (max-width: 768px) { .box { background: black; } }
  这时候inline的style属性优先级最高，外部的规则会被忽略。解决办法：
• 提升外部选择器的权重，比如改成body .box或者给元素加更具体的类
• 尽量避免inline里写和媒体查询冲突的样式（最好把样式都统一放到外部CSS里，方便维护）
• 万不得已可以用!important（但不推荐，会增加后续维护难度）

3. 媒体查询语法写错了 #

移到外部文件的时候，有没有不小心打错字？比如：

• 少写了括号：@media screen and max-width:768px（正确应该是@media screen and (max-width:768px)）
• 拼写错误：把max-width写成maxwidth，或者screen写成scren
• 逻辑符错误：比如用&代替and

你可以把外部CSS里的@media代码复制回inline里试试，如果能生效，说明代码本身没问题；如果也失效了，那就是语法错误。

4. 浏览器缓存了旧的CSS文件 #

有时候浏览器会缓存之前的外部CSS文件，你修改了内容但浏览器没加载新的。解决办法：

• 按Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存
• 给CSS文件加版本号，比如把<link href="style.css">改成<link href="style.css?v=2">，这样浏览器会认为是新文件，重新加载

5. 服务器MIME类型设置错误 #

如果服务器没有把CSS文件的MIME类型设置为text/css，浏览器可能无法正确解析它。你可以在开发者工具的Network标签里，点击你的CSS文件，看Response Headers里的Content-Type是不是text/css。如果不是，需要调整服务器配置（比如Apache或Nginx的配置文件）。

快速排查步骤总结 #

1. 检查外部CSS是否成功加载（Network面板看状态码）
2. 看Elements面板的Styles里，外部媒体查询规则是否被划掉（划掉就是被覆盖了）
3. 复制外部@media代码到inline里验证语法是否正确
4. 强制刷新清除缓存再测试

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