CSS有許多應用，其中一個非常有用的應用就是實現可伸縮的菜單。通過使用CSS的強大功能，我們可以創建一個菜單，它可以根據屏幕大小和設備類型自動適應布局。下面是一個示例的代碼：

.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;
}
}

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

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

在設備屏幕比較小的情況下，我們通常使用移動設備或平板電腦來瀏覽網站。此時，菜單欄應該具有可讀性，因此按照如上方式進行處理，可以提高用戶體驗。