CSS3 具備了許多更為強大的頁面布局方案，其中最為重要的就是頁面自適應。通俗來講，就是頁面可以根據瀏覽器的大小調整頁面布局，使得在各種設備上都有良好的呈現效果。

/* 基礎設置 */
html,body {
height:100%;
width:100%;
}
/* 自適應布局 */
@media screen and (min-width: 768px) {
/* 小于等于 768px 時不生效 */
}
@media screen and (min-width: 992px) {
/* 大于 768px 且小于等于 992px 時生效 */
}
@media screen and (min-width: 1200px) {
/* 大于 992px 且小于等于 1200px 時生效 */
}
@media screen and (min-width: 1600px) {
/* 大于 1200px 時生效 */
}

通過上面的代碼，我們可以設置針對不同寬度的設備適應不同的CSS樣式，產生不同的頁面布局效果。如在小屏幕的設備上，我們可以將導航欄隱藏或折疊，以便更好的展示內容；在較大屏幕的設備中，可以使用兩欄或三欄等更加寬敞的布局展示內容。同時，CSS3 還提供了更多的自適應實現方案，如 rem、vw、vh 和媒體查詢等，這些技術可以讓我們更靈活、更高效地實現頁面自適應。