CSS導航欄是我們網站設計中常用的組件之一，它不僅扮演著導航網站內容的作用，還可以為網站的美觀度加分。但是，對于一個設計好看、功能完善的CSS導航欄，有時候我們需要讓它隨著窗口大小的變化而自適應調整，以避免因為屏幕尺寸而影響用戶體驗。

.nav {
display: flex; /* 啟用 flex 布局 */
justify-content: space-between; /* 把子元素分散對齊 */
align-items: center; /* 垂直居中 */
height: 80px; /* 導航欄高度 */
}
.nav-logo {
flex: 1; /* 自適應寬度 */
}
.nav-menu {
flex: 2; /* 自適應寬度 */
}
.nav-menu ul {
display: flex; /* 啟用 flex 布局 */
justify-content: flex-end; /* 把子元素右對齊 */
}
.nav-menu li {
margin-right: 20px; /* 子元素間距 */
}

上面的 CSS 代碼使用了 flex 布局，其中 .nav 使用了 display: flex 屬性，從而啟用了 flex 布局。.nav-logo 和 .nav-menu 則是設置了寬度自適應，使得在不同的屏幕尺寸下，導航欄中的 Logo 和菜單都可以隨著屏幕寬度做出相應的改變。

總之，如果我們想要設計一個好看又便于使用的CSS導航欄，一定要充分考慮到頁面的自適應性，提高用戶體驗。