隨著移動設備的普及，越來越多的用戶選擇使用手機或平板設備來瀏覽網(wǎng)頁。因此，在設計網(wǎng)頁時，如何使其自適應不同大小的屏幕和不同的設備已經(jīng)成為一個重要的考慮因素。這就是 CSS 自動適應的重要性所在。

CSS 自動適應的核心理念在于布局流動性。也就是說，網(wǎng)頁的各個元素應該根據(jù)屏幕寬度自動調整它們的大小和位置。所以，當用戶從電腦屏幕切換到手機屏幕時，網(wǎng)頁的各個部分會自動進行調整，以適應屏幕的大小。

@media screen and (max-width: 768px) {
/* 當屏幕寬度小于等于 768px 時，執(zhí)行下列 CSS */
.header {
font-size: 14pt;
height: 80px;
}
.nav {
display: none;
}
.main {
font-size: 10pt;
width: 100%;
margin: 0;
}
.sidebar {
width: 0;
display: none;
}
.footer {
padding: 5px;
font-size: 10pt;
}
}

如上所示，我們可以利用 CSS 媒體查詢來實現(xiàn)自動適應。在上述代碼中，當屏幕寬度小于等于 768px 時，執(zhí)行了一系列的 CSS 樣式。這樣，我們就可以針對不同的屏幕情況進行設計并使網(wǎng)頁在不同的設備上呈現(xiàn)出最佳的效果。

除了使用媒體查詢外，我們還可以使用 float、relative、absolute、flex 等布局方式來實現(xiàn)自動適應。但無論使用何種方式，自動適應的目的是要確保網(wǎng)頁能夠平穩(wěn)地適應用戶在不同的設備和屏幕上的需求。