隨著移動設備的普及，越來越多的用戶習慣于通過手機設備訪問網站。然而，手機的屏幕尺寸和PC不同，這對網頁設計提出了新的挑戰。若網頁不能自動適應不同屏幕大小，那么用戶體驗將嚴重受損。為解決這種問題，CSS提供了很多方便的自適應技術，下面我們就來看一看吧。

首先，我們需要使用viewport元標簽對頁面進行設置。viewport寬度為設備的邏輯寬度，而不是屏幕物理寬度。這樣，我們就可以為每個設備提供適宜的頁面大小。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

接下來，我們可以使用CSS媒體查詢技術來根據不同設備的屏幕大小調整布局。例如：

@media screen and (max-width: 768px) {
//在小于等于768px的屏幕大小下應用以下樣式
body {
font-size: 16px;
}
}

使用媒體查詢可以根據不同設備的屏幕大小調整字體大小、圖片大小、布局等。我們還可以使用相對單位，如em、rem等，來保證頁面的比例不失衡。

最后，我們還可以使用Flexbox布局，它可以自動對齊、換行和縮放子元素，以適應不同屏幕大小。例如，以下代碼可以將三個盒子自動分配到一行：

.container {
display: flex;
flex-wrap: wrap;
}

以上就是幾種基本的CSS自適應技術。使用它們可以使網頁在不同設備下呈現出最佳效果，提高用戶體驗。