Media Query响应式失效：颜色未变更、菜单未折叠，750px断点不生效

媒体查询失效的核心原因及修复方案 #

1. 你当前代码存在的直接语法错误 #

你的媒体查询语句中，and 关键字和后续的 (max-width:750px) 之间缺少空格，属于CSS语法错误，浏览器无法正确识别这条规则，会直接判定为无效代码。

• 错误写法：

@media only screen and(max-width:750px){
    .nav{
    background: black;
        }
}

• 修正后写法：

@media only screen and (max-width:750px){
    .nav{
    background: black;
        }
}

2. 修正空格后仍失效的常见排查方向 #

• 页面未配置视口meta标签，移动端浏览器会默认按PC端宽度渲染页面，导致断点不匹配，需要在HTML的head标签中添加：

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

• 媒体查询写在了同权重的普通.nav样式之前，被后面的普通样式覆盖，需要保证媒体查询规则放在同选择器普通样式的后面。
• 选择器权重不足，比如你原本给.nav设置背景时用了类似header .nav这种权重更高的写法，媒体查询内仅用.nav会被覆盖，可以提升媒体查询内选择器的权重，或临时加!important测试是否是权重问题。
• 存在区间重叠的其他媒体查询规则，覆盖了当前断点的样式。
• 可以打开浏览器开发者工具的元素面板，直接查看该媒体查询规则是否被浏览器识别、是否被划掉标记为无效，快速定位问题。

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