桌面端显示桌面导航栏、移动端显示移动导航栏问题求助

你的问题出在CSS样式的优先级和顺序上：全局的.mobile-nav { display:none!important; }优先级过高，且位于媒体查询代码之后，导致移动端媒体查询里的display:block无法覆盖这个隐藏规则，所以移动端导航栏显示空白。

修正后的CSS代码（推荐方案，尽量避免使用!important）： #

/* 默认隐藏移动端导航，桌面端显示桌面导航 */
.mobile-nav {
  display: none;
}

/* 当屏幕宽度≤800px时，切换导航显示状态 */
@media only screen and (max-width: 800px) {
  .desktop-nav {
    display: none;
  }
  .mobile-nav {
    display: block;
  } 
}

原理说明： #

• 全局样式默认隐藏移动端导航，桌面端自然显示桌面导航（未给.desktop-nav设置隐藏规则）。
• 媒体查询代码放在全局样式之后，当屏幕宽度符合移动端条件时，媒体查询内的样式会覆盖全局样式（选择器权重相同的情况下，后声明的样式优先级更高）。

备选方案（保留!important的写法）： #

如果你必须保留!important，需要确保媒体查询里的样式优先级足够：

@media only screen and (max-width: 800px) {
  .desktop-nav {
    display: none!important;
  }
  .mobile-nav {
    display: block!important;
  } 
}

.mobile-nav {
  display:none!important;
}

这种写法把媒体查询放在全局样式之前，同时给媒体查询内的样式也加上!important，利用媒体查询的条件触发来覆盖全局规则，但不推荐过度使用!important，会增加后续样式维护的复杂度。

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