CSS自適應布局指的是通過CSS樣式定義網頁元素的大小、位置和排布方式，使得網頁布局可以適應不同的設備屏幕大小和分辨率，從而為用戶提供更好的瀏覽體驗。在傳統的固定布局中，網頁元素的大小和位置都是通過像素或百分比等固定的計量單位確定的，而在自適應布局中，網頁的樣式使用相對單位，以及CSS3的媒體查詢等技術，使得布局具有更高的靈活性。

/* 在CSS中定義網頁元素的大小可以使用相對單位 */
.container {
width: 80%; /* 相對于父級元素寬度 */
max-width: 1200px; /* 最大寬度，防止元素過大 */
margin: auto; /* 垂直居中和水平居中 */
}
/* 使用媒體查詢定義不同分辨率下的網頁樣式 */
@media screen and (max-width: 768px) {
.container {
width: 100%;
padding: 0 20px; /* 為移動設備留出一定的邊距 */
}
}
@media screen and (min-width: 1200px) {
.container {
width: 960px;
}
}

通過上述代碼可以看出，CSS自適應布局可以基于不同的設備屏幕大小和分辨率，針對不同的布局情況使用不同的樣式。這種方法可以使網頁在不同屏幕大小下都能具有良好的顯示效果，并且可以提高網頁的兼容性，在大屏幕和小屏幕上都可以完美地展現。