移动端Media Query失效求助：320px-767px媒体查询不生效

1. 必查：添加viewport元标签 #

移动端媒体查询生效的核心前提是页面声明了视口规则，否则浏览器会以桌面端视口渲染，导致小屏媒体查询无法触发。在HTML的<head>中加入：

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

2. 排查CSS优先级冲突 #

如果媒体查询内的规则被其他更高优先级样式覆盖，浏览器会直接忽略它：

• 检查普通样式是否使用了!important强制覆盖
• 对比选择器权重，比如.page .content的权重高于.content，若媒体查询用了后者，会被前者覆盖
  可以临时给媒体查询规则加!important测试（仅用于排查，不建议长期使用），或调整选择器让其权重匹配需求。

3. 核对媒体查询语法 #

虽然你的写法看似正确，但需确认细节：

• 确保and前后有空格（部分浏览器对空格敏感），括号无遗漏
• 针对≤767px的场景，@media screen and (max-width: 767px)已足够，无需额外添加min-width:320px（多写不会直接导致失效，但简化后更易排查）

4. 检查浏览器状态与设备模拟 #

• 确保浏览器缩放为100%（快捷键Ctrl+0），缩放会干扰视口宽度计算
• 用浏览器开发者工具的设备模拟功能（F12后点击设备图标），切换到手机尺寸，在Elements面板的Styles中查看媒体查询规则是否被标记为“已应用”

5. 确认CSS加载顺序 #

若媒体查询写在普通样式之前，会被同权重的后续普通样式覆盖。确保媒体查询放在对应普通样式的后面：

/* 桌面端基础样式 */
.card {
  width: 600px;
}

/* 媒体查询放在后面 */
@media screen and (max-width: 767px) {
  .card {
    width: 100%;
  }
}

6. 验证CSS文件加载状态 #

在浏览器开发者工具的Network面板，确认CSS文件返回状态为200（加载成功）；再到Sources面板查看，确保媒体查询代码确实存在于已加载的CSS文件中。

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