CSS自適應布局是指根據用戶使用的設備屏幕分辨率來實現網頁布局的自動適應，以達到更好的用戶體驗。在編寫自適應布局的CSS樣式文件時，我們常會用到響應式設計技術。

@media screen and (max-width: 800px) {
body {
font-size: 14px; /* 改變字體大小 */
}
}
@media screen and (max-width: 480px) {
body {
font-size: 12px; /* 再次改變字體大小 */
}
}

在上面的代碼中，我們利用了CSS3中的媒體查詢功能，通過設定不同分辨率下的樣式，來實現不同屏幕的自適應布局。例如，當屏幕寬度小于800像素時，我們設置字體大小為14像素；當屏幕寬度小于480像素時，我們再次改變字體大小為12像素。通過這樣的方式，我們可以優化網頁在不同設備上的顯示效果，提高用戶體驗。

除了使用媒體查詢功能，我們還可以利用相對尺寸單位來實現自適應布局。例如，使用百分比或em單位來設定元素尺寸，讓元素隨著屏幕尺寸的不同而自動調整大小。這樣的方式可以有效地讓網頁更好地適應不同的屏幕分辨率，提高用戶體驗。

body {
font-size: 16px;
}
@media screen and (max-width: 800px) {
body {
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
body {
font-size: 12px;
}
}
div{
width:50%;
}
@media screen and (max-width: 600px) {
div {
width: 100%;
}
}

上面的代碼中，我們將body元素的字體大小設定為16像素，同時將div元素的寬度設為50%。在屏幕寬度小于800像素時，我們將body元素的字體大小設定為14像素；在屏幕寬度小于480像素時，我們再次將其改變為12像素。而在屏幕寬度小于600像素時，我們將div元素的寬度設置為100%。通過這些設置，我們能夠讓網頁在不同尺寸的屏幕上都能夠正常地顯示，并提供更好的用戶體驗。