CSS移動端導航欄的自適應是網頁設計中非常關鍵的一部分。隨著移動設備數量的增加，網站的自適應性變得越來越重要。本文將介紹如何使用CSS將導航菜單自適應到不同的移動設備上。

/* 導航欄樣式 */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #333;
color: #fff;
}
/* 導航欄菜單樣式 */
nav ul {
display: flex;
list-style: none;
}
nav li {
margin: 0 1rem;
}
nav a {
color: #fff;
text-decoration: none;
}
/* 媒體查詢 */
@media (max-width: 768px) {
/* 降低導航欄菜單的優先級 */
nav ul {
position: absolute;
top: 4rem;
left: -100%;
width: 100%;
height: calc(100vh - 4rem);
background-color: #333;
transition: all 0.5s ease;
}
nav li {
display: block;
margin: 1rem;
text-align: center;
}
nav a {
display: block;
font-size: 1.5rem;
margin: 1rem 0;
border-bottom: 1px solid #fff;
}
/* 將菜單顯示在屏幕上 */
nav ul.active {
left: 0;
}
}

如上所示，使用CSS的媒體查詢可以讓導航菜單在移動設備上自適應。當設備寬度小于768px時，通過將導航菜單設置成絕對定位，然后向左移動100%。菜單的高度設置為視口高度減去4rem的導航欄高度。當用戶點擊菜單按鈕時，將菜單的左邊距設置為0以顯示菜單。

總之，使用CSS可以輕松地將導航菜單自適應到移動設備上。通過使用媒體查詢和一些簡單的CSS樣式，可以讓菜單在不同設備上顯示得非常漂亮。