在現代網頁設計中，自適應和響應式已經成為了必備的概念。針對不同的設備和窗口尺寸，我們需要使用不同的CSS布局來保證網頁在各種情況下都能良好的展示。

CSS中的自適應布局，一般指能夠自動調整元素尺寸和位置的布局方法。使用自適應布局，可以在不同尺寸的設備上展示出優秀的用戶體驗。這一點決定了在進行網站的開發時候，設計自適應代碼是必不可少的。

@media (min-width: 768px) {
/* 以適應屏幕寬度至少為 768px 的設備為例 */
.container {
width: 750px;
margin: 0 auto;
}
.box {
float: left;
width: 50%;
height: 200px;
}
.box:nth-of-type(even) {
float: right;
}
}

如上所示，在CSS中使用 @media 媒體查詢可以判斷用戶設備的屏幕大小，并定制相應的CSS樣式。例如，在viewport的寬度>=768px的情況下，.container元素的寬度設為750px，同時實現左右的margin自適應；.box 元素的寬度設為50%并浮動到左/右方，以及奇數/偶數元素的不同對齊方式。

因此，我們可以在開發過程中創造性地運用自適應布局，以適應各種窗口大小和各式顯示設備，實現更完美的用戶體驗。