CSS自適應(yīng)布局是一種讓網(wǎng)頁(yè)在不同屏幕大小下呈現(xiàn)相同布局的技術(shù)。與傳統(tǒng)布局相比，它更加靈活方便，可以適應(yīng)不同的設(shè)備，從而提高用戶體驗(yàn)。

/* 設(shè)置容器寬度為100% */
.container {
width: 100%;
}
/* 設(shè)置圖片寬度為100% */
img {
width: 100%;
}
/* 響應(yīng)式布局 */
@media screen and (min-width: 768px) {
/* 在寬度大于等于768px的屏幕上顯示三列布局 */
.col {
width: 33.3333%;
float: left;
}
}
@media screen and (min-width: 992px) {
/* 在寬度大于等于992px的屏幕上顯示四列布局 */
.col {
width: 25%;
float: left;
}
}

以上代碼演示了一個(gè)響應(yīng)式網(wǎng)頁(yè)布局的例子。通過(guò)設(shè)置@media查詢，可以根據(jù)屏幕的寬度改變布局，實(shí)現(xiàn)自適應(yīng)。

在手機(jī)網(wǎng)頁(yè)設(shè)計(jì)中，使用CSS自適應(yīng)布局能夠適應(yīng)不同的尺寸與分辨率的手機(jī)屏幕，使得用戶在不同設(shè)備上瀏覽網(wǎng)頁(yè)時(shí)都能獲得良好的視覺(jué)體驗(yàn)。