是否可以使用 display:none 為響應式站點創建多個 CSS 導航欄？

Question

我有一個完全由 CSS 制作的導航欄，它在大屏幕上運行良好，但太大而不能簡單地在移動設備上重排。 我的想法之一是簡單地創建第二個移動友好的導航欄，並將其放置在桌面版本的頂部，但使用 display:none 將其隱藏。 然后，我可以使用移動斷點來顯示移動導航欄並隱藏桌面版本。

這是 CSS 可接受的做法嗎？ 如果沒有，是否有另一種方法可以為不同的斷點顯示完全不同的導航欄？

編輯：為了澄清，我使用@media 查詢斷點。

Answer 1

是的，這樣做很好。 但是，為了澄清您應該使用 CSS 媒體查詢來告訴瀏覽器何時切換到不同的導航欄。

Answer 2

是的，通常的做法是使用 display: none 隱藏或顯示某些元素，用於媒體查詢的不同斷點。

有關媒體查詢以及如何使用它們的更多信息，請訪問此站點。