CSS 是網頁設計中必不可少的一種樣式語言，可以實現很多功能，其中一個非常重要的功能就是屏幕自適應。在移動設備如今的普及下，保證網頁在不同尺寸的手機和平板上都能正常顯示已經變得十分重要。

首先，我們需要明確一個概念——響應式設計。響應式設計的核心概念就是網頁可以根據用戶使用的設備，自動調整顯示方式，以適應不同屏幕尺寸。也就是說，我們需要根據不同屏幕大小設置不同的 CSS 樣式，以達到屏幕自適應的效果。

/*設置屏幕寬度小于等于 768px 時的布局樣式*/
@media screen and (max-width: 768px){
body{
font-size: 14px;
}
.header{
height: 50px;
}
.main{
width: 90%;
}
}
/*設置屏幕寬度小于等于 576px 時的布局樣式*/
@media screen and (max-width: 576px){
body{
font-size: 12px;
}
.header{
height: 40px;
}
.main{
width: 80%;
}
}

在上面的代碼中，我們使用了媒體查詢（@media），設置了屏幕寬度分別小于等于 768px 和小于等于 576px 時的 CSS 布局樣式。如果屏幕寬度滿足條件，則會應用對應的樣式。

需要注意的是，設計響應式網頁時，我們需要注重不同設備間的設計細節，包括字體大小、排版布局、圖片尺寸等。同時，我們也需要進行不同設備的測試，確保網頁在不同設備上都能正常顯示。

如此，我們就完成了關于 CSS 如何實現屏幕自適應的介紹。只有掌握了響應式設計的核心，我們才能在今后的網頁設計中更好地應對不同設備的需求。