隨著移動設備的普及，越來越多的網站要求能夠自適應不同尺寸的屏幕。而 CSS 則成為了實現自適應的重要手段之一，本文將介紹如何使用 CSS 寫自適應代碼。

首先，需要了解單位的選擇。相比于像素（px）這種固定單位，推薦使用相對單位，如 em、rem、百分比、vw、vh，它們能夠根據設備的屏幕大小來自適應調整。

接著，需要考慮布局的選擇。推薦使用彈性布局（Flexbox）和網格布局（Grid），它們能夠根據容器的大小來自適應排列內容。

下面是一個使用 Flexbox 實現自適應布局的示例：

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex-basis: calc(33.33% - 20px);
margin-bottom: 20px;
}

上述代碼中，我們使用了 flexbox 布局，將容器 .container 設置為 display: flex，通過 flex-wrap 屬性實現了自適應換行，使用 justify-content: space-between 將項目平均分布在容器中。

同時，我們為每個項目 .item 設置了 flex-basis 屬性，它表示項目的基礎寬度，這里通過 calc() 函數計算得到 33.33% 的寬度再減去 20px 的間距。最后，我們還添加了 margin-bottom 屬性，為每個項目添加 20px 的下邊距。

總的來說，通過選擇合適的單位和布局方式，我們可以實現自適應的布局效果，讓網站能夠在各種設備上有良好的展示效果。