在CSS中，我們可以使用媒體查詢（Media Queries）來檢測窗口大小，并根據(jù)窗口大小調(diào)整樣式，當(dāng)窗口寬度小于某個值時，我們可以將導(dǎo)航欄變?yōu)榇怪迸帕?，以下是一個簡單的示例：

@media (max-width: 600px) {
  .nav-bar {
    display: flex;
    flex-direction: column;
  }
}

在這個示例中，當(dāng)窗口寬度小于600px時，導(dǎo)航欄的樣式會變?yōu)榇怪迸帕?，你可以根?jù)自己的需求調(diào)整這個值。

響應(yīng)式導(dǎo)航欄設(shè)計

在響應(yīng)式設(shè)計中，導(dǎo)航欄的設(shè)計需要能夠適應(yīng)不同大小的屏幕，除了上述的媒體查詢方法，還有一些其他的設(shè)計技巧可以幫助你實現(xiàn)這一目標(biāo)：

1、折疊導(dǎo)航欄：在較小的屏幕上，你可以考慮將導(dǎo)航欄折疊成一個漢堡菜單（Hamburger Menu），這樣用戶可以點擊來展開導(dǎo)航選項。

2、子菜單折疊：對于多層級的導(dǎo)航菜單，可以考慮在屏幕寬度較小時折疊子菜單，只顯示主菜單項。

3、動態(tài)調(diào)整字體大小：根據(jù)屏幕大小動態(tài)調(diào)整導(dǎo)航欄中的字體大小，可以確保導(dǎo)航欄在視覺上更加協(xié)調(diào)。

示例代碼

以下是一個更完整的示例代碼，展示了如何設(shè)計一個響應(yīng)式導(dǎo)航欄：

<nav class="nav-bar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.nav-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.nav-bar ul {
  list-style: none;
  padding: 0;
}
.nav-bar li {
  display: inline-block;
  margin-right: 10px;
}
@media (max-width: 600px) {
  .nav-bar {
    display: flex;
    flex-direction: column;
  }
  .nav-bar li {
    margin-right: 0;
  }
}

在這個示例中，導(dǎo)航欄在屏幕寬度小于600px時會變?yōu)榇怪迸帕?，并且每個列表項之間的間隔會減小，你可以根據(jù)自己的設(shè)計需求調(diào)整這些樣式。