CSS在網頁設計中扮演著至關重要的角色，其中一個最基本的功能就是根據屏幕大小變化而自適應地調整布局樣式。

@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

上面的代碼演示了如何使用CSS中的媒體查詢（@media）來判斷屏幕寬度是否小于等于600像素，如果成立則將body元素的背景顏色設置為淺藍色。

有時候，我們還需要針對不同屏幕尺寸設定不同的字體大小、行高、內邊距等樣式。在實際開發中，我們可以通過以下代碼實現：

@media screen and (max-width: 1200px) {
body {
font-size: 16px;
line-height: 1.5;
}
}
@media screen and (max-width: 768px) {
body {
font-size: 14px;
line-height: 1.3;
padding: 10px;
}
}

上面的代碼中，我們設置了兩個媒體查詢。第一個查詢在屏幕寬度小于等于1200像素時生效，將body元素的字體大小設置為16px，行高為1.5倍。第二個查詢則在屏幕寬度小于等于768像素時生效，將字體大小設置為14px，行高為1.3倍，并增加10像素的內邊距。

需要注意的是，這只是CSS根據屏幕大小變化的部分功能。實際開發中，我們還需要考慮到不同屏幕尺寸下顯示的內容數量、排列方式等因素，才能實現真正意義上的響應式布局。