什么是CSS自適應菜單？簡單來說，就是根據用戶設備不同的屏幕大小和分辨率，自適應調整菜單的布局。這個功能在現代網站設計中非常重要，因為越來越多的人使用移動設備訪問網站，而我們希望網站在不同設備上的顯示效果都能夠令人滿意。

本文將介紹如何使用CSS實現一個簡單的自適應菜單，并提供代碼和下載鏈接。

1. HTML結構

<nav class="menu">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品中心</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

2. CSS樣式

.menu {
display: flex;
justify-content: center;
}
.menu ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
margin: 0.5rem;
}
.menu a {
display: block;
padding: 0.5rem;
background-color: #333;
color: #fff;
text-decoration: none;
text-align: center;
border-radius: 0.25rem;
}
@media (max-width: 600px) {
.menu li {
margin: 0.25rem;
}
.menu a {
padding: 0.25rem;
font-size: 0.9rem;
}
}

3. 解釋與說明

我們使用了Flexbox布局來實現水平居中和彈性盒子的排列。在ul元素上，我們使用了flex-wrap: wrap屬性，使得菜單的子元素可以自動換行，從而適應屏幕的寬度。

在@media查詢中，我們重新定義了margin和padding的值，同時降低了字號大小，使得菜單在小屏幕設備上也可以顯示良好。

4. 下載鏈接

您可以在以下鏈接下載本文所介紹的完整實例代碼: