CSS自適應導航條是Web開發中常用的一種技術，它可以根據瀏覽器窗口的大小和設備類型進行適配，讓網頁內容在不同設備上都得到良好的顯示效果。

.nav {
display: flex; /* 確保子元素水平排列 */
justify-content: space-between; /* 使子元素均勻分布于導航條兩端 */
align-items: center; /* 垂直居中 */
padding: 20px; /* 設置內邊距，增強美觀性 */
background-color: #333; /* 導航條背景色 */
color: #fff; /* 文字顏色 */
}
.nav-logo {
font-size: 24px; /* 設置字號 */
font-weight: bold; /* 設置字體加粗 */
text-decoration: none; /* 去除下劃線 */
color: #fff; /* 文字顏色 */
}
.nav-list {
display: flex; /* 確保子元素水平排列 */
list-style-type: none; /* 去除列表符號 */
}
.nav-item {
margin-left: 20px; /* 增加子元素之間的距離 */
}
.nav-link {
text-decoration: none; /* 去除下劃線 */
color: #fff; /* 文字顏色 */
}
/* 在窄屏設備上顯示菜單按鈕 */
@media screen and (max-width: 768px) {
.nav-list {
display: none; /* 隱藏列表 */
}
.nav-btn {
display: block; /* 顯示按鈕 */
font-size: 24px; /* 設置字號 */
background-color: #fff; /* 背景色 */
color: #333; /* 字體顏色 */
border: none; /* 去除邊框 */
padding: 10px; /* 設置內邊距 */
cursor: pointer;
}
/* 點擊按鈕后彈出下拉菜單 */
.nav-menu {
display: none; /* 初始隱藏 */
position: absolute; /* 設置位置 */
top: 70px; /* 與導航條距離 */
right: 20px; /* 靠右側 */
background-color: #333; /* 背景色 */
padding: 20px; /* 設置內邊距 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加陰影效果 */
}
.nav-menu a {
display: block; /* 讓子元素成為塊級元素 */
margin-bottom: 10px; /* 增加子元素之間的距離 */
text-decoration: none; /* 去除下劃線 */
color: #fff; /* 文字顏色 */
}
/* 當下拉菜單可見時改變按鈕樣式 */
.nav-btn.active {
background-color: #333; /* 背景色 */
color: #fff; /* 文字顏色 */
}
.nav-btn.active + .nav-menu {
display: block; /* 顯示下拉菜單 */
}
}

通過上述代碼，實現了一個具有自適應功能的導航條，當瀏覽器窗口寬度小于768px時，在導航條末尾會自動顯示一個按鈕，點擊該按鈕可以彈出下拉菜單，用戶可以在菜單中選擇需要的內容，大大提高了網站的可用性。