在網頁開發中，自適應布局方式早已不再新奇。而 CSS 自適應布局可以更好地實現跨設備的布局，更加符合不同屏幕的多樣性需求。以下是幾種常見的 CSS 自適應布局方案。

1. 媒體查詢

@media screen and (max-width: 600px) {
/* 這里是 600 像素及以下屏幕的樣式 */
}

通過使用媒體查詢來針對不同的屏幕大小響應式地展示布局，這是最常用的自適應布局方式。媒體查詢能夠檢測屏幕大小，根據不同的屏幕大小來加載不同的 CSS 樣式。在編寫媒體查詢時，需要根據需求指定一定的寬度和高度，同時還要考慮比例和單位的選擇。

2. flex 布局

.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}

Flex 布局可以靈活地調整伸縮性容器，同時有豐富的屬性與方法，可以很好地滿足不同類別頁面的布局需求。Flex 布局中的主軸與側軸概念可以更好地控制布局，此外還可以利用 CSS 的特性來實現多種復雜布局。

3. vw 和 vh 單位

.container {
width: 100vw;
height: 100vh;
}

vw 和 vh 單位是針對視口大小而定的單位，這兩個單位非常適合實現百分比式布局，因為它們是媒體查詢和彈性盒子布局的補充。Vw 是指視口寬度的百分之一，vh 是指視口高度的百分之一。借助這兩個單位，就可以非常便捷地實現自適應布局。

以上介紹了幾種 CSS 自適應布局方式，每種都有其優點和適用場景。不同的展示需求需要不同的自適應布局方案，而最好的方法是根據具體的需求選擇合適的自適應布局方式。