CSS的頁面自適應是前端頁面設計中非常重要的一部分。隨著不同設備和分辨率的出現，頁面自適應能夠確保我們的頁面在任何大小和類型的設備上都能夠正常顯示。而使用CSS來實現頁面自適應是一種非常實用和便捷的方式。

/* 讓所有元素寬度自適應屏幕 */
*{
box-sizing: border-box; 
max-width: 100%; 
}
/* 通過媒體查詢調整元素樣式 */
@media (min-width: 768px) {
body {
font-size: 18px;
}
.container {
width: 750px;
margin: 0 auto;
}
}
@media (min-width: 992px) {
body {
font-size: 20px;
}
.container {
width: 970px;
margin: 0 auto;
}
}
@media (min-width: 1200px) {
body {
font-size: 22px;
}
.container {
width: 1170px;
margin: 0 auto;
}
}

上面的代碼片段是一個簡單的頁面自適應示例。使用box-sizing: border-box屬性和max-width: 100%屬性可以讓所有元素自適應屏幕大小。而通過使用媒體查詢，我們可以在不同的屏幕大小下調整元素樣式。

在媒體查詢中，我們設置了三個斷點，分別是768px、992px和1200px。當屏幕大小達到這些斷點時，我們就可以對元素的樣式進行調整。

通過使用這些簡單的CSS代碼，我們可以輕松地實現頁面自適應。這不僅可以提升我們的網站設計品質，也可以提升用戶體驗和流量。