在桌面視圖中顯示桌面導航欄，在移動視圖中顯示移動導航欄

Question

我只想在桌面屏幕上查看時顯示我為桌面視圖制作的導航欄，並顯示我為移動屏幕制作的導航欄。

我可以讓它工作，所以只有桌面導航欄版本顯示在桌面上，但它在移動視圖上是一個空白區域。

這是我當前的代碼：

HTML

<header class="mobile-nav">{% include 'navbar.html' %}</header>
<header class="desktop-nav">{% include 'navbardesktop.html' %}</header>

CSS

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

Answer 1

你在 CSS 中遇到了級聯的概念。

@media 規則不會對選擇性引入任何額外的權重，因此系統最初將元素設置為顯示：塊，但隨后發現請求將其設置為顯示：無。

因此，更改聲明的順序：

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

順便說一句，您應該能夠刪除 important.though 這可能取決於您擁有的任何其他樣式。