頁面自適應是現代網站設計中非常重要的一項技術。使用CSS可以幫助我們輕松地實現頁面自適應，下面我們來一步步看怎么使用CSS為頁面設置自適應樣式。

首先，我們需要設置 viewport。viewport是瀏覽器渲染網頁的區域。在標簽中，添加以下代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

上面代碼中，width=device-width表示讓viewport的寬度等于屏幕寬度，initial-scale=1.0表示要將頁面縮放到原本大小。

接下來，我們需要使用CSS的媒體查詢來實現頁面不同尺寸時的不同樣式。一般來說，我們會選取幾個常用的寬度范圍并設置相應的樣式。比如說，我們可以設置當屏幕寬度小于600像素時，把頁面的寬度設置為100%，其他情況下則為80%。代碼如下：

@media (max-width: 600px) {
body {
width: 100%;
}
}
@media (min-width: 601px) {
body {
width: 80%;
}
}

在上述樣式中，@media用于指定媒體查詢。當屏幕寬度小于600px時，body的寬度被設置為100%；當屏幕寬度大于等于601像素時，body的寬度被設置為80%。

最后，我們還需要為圖片設置自適應樣式。我們可以使用max-width為圖片設置最大寬度，這樣即使是在移動設備上查看，圖片也能正常顯示。代碼如下：

img {
max-width: 100%;
height: auto;
}

上述代碼中，max-width: 100%表示圖片的寬度最大為父元素的寬度；height: auto則會自動計算圖片高度，保證圖片比例不變。

通過以上步驟，我們就可以用CSS實現頁面自適應了。相信這對于網站設計和開發都是非常有幫助的。