CSS有許多應(yīng)用，其中一個(gè)非常有用的應(yīng)用就是實(shí)現(xiàn)可伸縮的菜單。通過(guò)使用CSS的強(qiáng)大功能，我們可以創(chuàng)建一個(gè)菜單，它可以根據(jù)屏幕大小和設(shè)備類型自動(dòng)適應(yīng)布局。下面是一個(gè)示例的代碼：

.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.nav-logo {
font-size: 24px;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
}
.nav-menu-item {
margin-left: 1em;
}
@media (max-width: 768px) {
.nav {
flex-direction: column;
}
.nav-menu {
flex-direction: column;
}
.nav-menu-item {
margin-left: 0;
margin-top: 1em;
}
}

在這個(gè)示例代碼中，我們使用了Flexbox布局模型，它可以方便地控制元素的位置和大小。我們還使用了@media查詢功能，這個(gè)功能可以讓我們根據(jù)設(shè)備屏幕大小來(lái)改變CSS樣式。

這段代碼中最重要的是@media查詢，它基本上告訴瀏覽器，如果屏幕的寬度小于或等于768像素，就應(yīng)用媒體查詢中的樣式規(guī)則。在這種情況下，我們將菜單的flex-direction屬性更改為column，這將使菜單垂直排列。我們還使用margin-top屬性將每個(gè)菜單項(xiàng)間的間距增加到1em。

在設(shè)備屏幕比較小的情況下，我們通常使用移動(dòng)設(shè)備或平板電腦來(lái)瀏覽網(wǎng)站。此時(shí)，菜單欄應(yīng)該具有可讀性，因此按照如上方式進(jìn)行處理，可以提高用戶體驗(yàn)。