响应式导航栏在大屏设备不显示的原因排查

问题背景 #

采用移动端优先开发响应式网页，小屏适配完成后转向桌面端设计：

• 小屏状态：#myLinks默认display:none，点击汉堡图标显示导航栏
• 大屏需求：隐藏汉堡图标，导航栏横向显示在页面顶部
• 问题：媒体查询中设置#myLinks的display为block/flex后无效果

效果截图 #

• 大屏显示异常：
  
• 小屏显示正常：
  

问题核心原因 #

JS操作的是元素内联样式，内联样式的优先级高于CSS文件中的媒体查询规则。小屏状态下点击汉堡图标后，#myLinks的内联style.display会被设置为block或none，大屏媒体查询中的display:flex无法覆盖这个内联样式，导致导航栏无法正常显示。

修复方案 #

方案1：用CSS类控制显示隐藏（推荐） #

完全用CSS规则主导显示逻辑，避免内联样式干扰：

修改后的CSS代码

/* 小屏默认隐藏导航 */
#myLinks.hidden {
    display: none;
}

#navbarlogo {
    margin: 1rem 0 4rem 0;
}

.logo-menu {
    display: flex;
    justify-content: space-between;
}

nav {
    text-decoration: none;
    background: black;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.icon {
    color: black;
}

.logo {
    display: inline-block;
}

li a:link {color:#FFFAFA;}    
li a:visited {color:#FFFAFA;}

li {
    padding: 1rem;
}

/* 大屏媒体查询 */
@media screen and (min-width: 1024px) {
    /* 大屏强制显示导航，不受小屏类状态影响 */
    #myLinks {
        display: flex;
    }

    nav {
        margin: 0;
        background: var(--color-bg);
    }

    li a:link {color:var(--color-primary);}    
    li a:visited {color:var(--color-primary);}

    .icon {
        display: none;
    }

    #navbarlogo {
        display: flex;
        justify-content: space-between;
        margin: 0;
    }

    /* 让导航项横向排列 */
    #myLinks li {
        display: inline-block;
    }
}

修改后的JS代码

function myFunction() {
  var x = document.getElementById("myLinks");
  x.classList.toggle("hidden"); // 切换类，不再操作内联样式
}

const navbarlogo = () => {
  return (
    <div id='navbarlogo'>
      <div className="logo-menu">
        <div className='logo'>
          <img src={logo} alt="" /> 
        </div>
        <a href="#" class="icon" onClick={myFunction}>
            <GiHamburgerMenu size = '28'/>
        </a>
      </div>
      <nav class="topnav">
        <ul id="myLinks" className="hidden"> {/* 默认添加隐藏类 */}
          <li><a href="#">Features</a></li>
          <li><a href="#">Affiliates</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Communities</a></li>
          <li><a href="#">Join Waitlist</a></li>
        </ul>
      </nav>
    </div>
  )       
}

方案2：临时应急（不推荐长期使用） #

如果不想修改JS逻辑，直接在媒体查询中用!important强制覆盖内联样式：

@media screen and (min-width: 1024px) {
    #myLinks {
        display: flex !important;
    }
    /* 其他原有大屏样式不变 */
}

修复后效果 #

• 小屏：默认隐藏导航，点击汉堡图标切换显示/隐藏状态
• 大屏：自动隐藏汉堡图标，导航栏横向固定在页面顶部，不受小屏操作状态影响

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