CSS自適應布局是現代網頁設計中一個非常重要的概念，也是常見的前端設計要求之一。在移動設備尤其流行的今天，通過響應式設計來適應不同屏幕尺寸的設備成為了一個必備的技能。以下是一個簡單的CSS自適應布局示例：

/* 設置基本的網頁布局樣式 */
body {
margin: 0;
padding: 0;
}
/* 定義網頁中的容器 */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
box-sizing: border-box;
}
/* 定義網頁中的元素 */
h1 {
font-size: 36px;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 20px 0;
}
/* 定義響應式布局 */
@media screen and (max-width: 768px) {
.container {
width: 90%;
padding: 10px;
}
h1 {
font-size: 24px;
}
p {
font-size: 14px;
}
}

在上面的代碼中，我們首先設置了網頁的基本布局樣式，包括了body、容器.container以及元素h1和p。在容器class屬性中，我們使用了width、margin和padding屬性來控制容器寬度和間距。同時，我們還使用box-sizing屬性來定義盒模型，并且設置了背景顏色。

接下來，我們使用@media媒體查詢來定義響應式布局。這里，我們使用max-width屬性來指定屏幕最大寬度為768px。在這種情況下，我們重新設置了.container、h1和p元素的樣式，并將字體大小改小。通過這種方式，我們可以使網頁在移動設備上更加友好，讓用戶得到更好的瀏覽體驗。

總之，CSS自適應布局是一項非常重要的技能，可以提高網頁的適應性、用戶體驗和訪問者的滿意度。在設計網站和應用程序時，我們應該充分利用它的優勢，從而使我們的網站和應用程序更加吸引人和易于使用。