ReactJS中CSS媒体查询不生效，汉堡菜单响应式显示异常

问题原因及对应解决方案 #

1. 缺失viewport元标签 #

这是移动端媒体查询失效最常见的诱因。如果HTML头部没有配置viewport标签，移动端浏览器会默认以桌面端视口宽度（通常为980px）渲染页面，导致宽度≤799px的媒体查询始终无法触发。
解决方法：在React项目的public/index.html文件的<head>标签内添加如下配置：

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

2. CSS优先级冲突 #

• 媒体查询的样式顺序放在了基础样式之前，同权重下基础样式的display:none会覆盖媒体查询的规则
• 存在其他权重更高的选择器（比如行内样式、带!important的规则、更长的后代选择器）强制覆盖了汉堡菜单的display属性
  解决方法：

1. 确保媒体查询的代码写在所有基础汉堡菜单样式的后面，同权重下后定义的样式优先级更高
2. 可以临时给媒体查询内的规则加!important验证是否是优先级问题，确认后再调整选择器权重避免滥用!important：

@media only screen and (max-width: 799px) {
  .header .headerContainer_hamburgerMenu {
    display: block !important;
  }  
}

3. 媒体查询语法/嵌套错误 #

如果使用了CSS预处理器（Less/Sass等），可能存在媒体查询嵌套在其他选择器内部的写法错误，导致规则不生效；另外部分旧版本浏览器对only screen的写法存在兼容问题。
解决方法：

1. 检查媒体查询是否定义在全局样式层级，没有被嵌套在其他选择器的大括号内
2. 可以简化媒体查询写法测试：

@media (max-width: 799px) {
  .header .headerContainer_hamburgerMenu {
    display: block;
  }  
}

4. 父元素可见性异常 #

如果汉堡菜单的父级元素（比如.header、.headerContainer）在小屏尺寸下被设置了display: none或者visibility: hidden，哪怕子元素本身配置了display: block也无法显示。
解决方法：在开发者工具元素审查面板中，逐层检查汉堡菜单的所有父级元素在小屏状态下的可见性属性，确保父元素处于显示状态。

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