隨著移動設備的普及，對于不同屏幕尺寸的適配問題也變得越來越重要。

CSS布局作為網頁設計中不可或缺的一部分，也需要能夠適應不同的屏幕尺寸。這就是自適應布局的出現。

/*自適應布局的基本模板*/
@media screen and (max-width: 768px) {
/*在小于等于768px時的樣式*/
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
/*在大于768px，小于等于1024px時的樣式*/
}
@media screen and (min-width: 1025px) {
/*在大于1024px時的樣式*/
}

自適應布局利用了CSS3新增的@media查詢語句，通過設定不同的屏幕尺寸條件和對應的樣式來適配不同的設備。

同時，為了增強適配性能，還可以配合rem單位使用，以便根據設備的字體大小自動適應網頁元素大小。

/*配合rem單位的自適應布局*/
html {
font-size: 16px;
}
@media screen and (max-width: 768px) {
/*在小于等于768px時的樣式*/
div {
font-size: 1rem;
}
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
/*在大于768px，小于等于1024px時的樣式*/
div {
font-size: 1.2rem;
}
}
@media screen and (min-width: 1025px) {
/*在大于1024px時的樣式*/
div {
font-size: 1.5rem;
}
}

通過使用自適應布局和rem單位，可以讓網頁在不同的設備上具有更好的展示效果和用戶體驗。