折疊是一種優化用戶體驗的方式，使得頁面在窄屏幕的設備上更易于閱讀和導航。通常，在移動設備上，CSS當屏幕縮小時，網頁元素需要縮放到適應屏幕的寬度。然而，縮小的元素在網頁中不很友好。因此，需要使用CSS折疊。

/* 折疊代碼 */
@media (max-width: 768px) {
.content {
display: none;
}
.accordion {
cursor: pointer;
}
.active:after {
content: "\002B";
}
}

折疊通常使用在文本內容的折疊上。例如，在常見的問答網站上，我們可以看到單擊問答問題名稱可以展開回答，接著點擊問題名稱則關閉回答。這樣，問題的列表更加緊湊，用戶更容易找到他們感興趣的問題。

/* 折疊問答示例代碼 */
.accordion {
display: block;
color: #003F6D;
font-weight: bold;
padding: 10px 15px;
margin-bottom: 2px;
background-color: #EBF7FF;
border: 1px solid #CCE5FF;
cursor: pointer;
}
.content {
box-shadow: 1px 1px 5px grey;
border: 1px solid #CCE5FF;
padding: 15px;
}
.active:after {
content: "\2212";
}

使用CSS折疊可以更好的適應不同設備的寬度，提高用戶體驗。在開發響應式網站時，折疊成為一種必備的手段，給用戶提供更好的瀏覽體驗。