隨著移動設備的廣泛普及和不同分辨率的屏幕越來越多，如何讓網頁適應不同的設備和分辨率就成為了前端開發人員需要面對的一個重要問題。CSS自適應就是一種能夠解決這個問題的技術。下面我們來具體了解一下如何使用CSS自適應來適配不同的設備和分辨率。

@media screen and (max-width: 480px){
/*在網頁寬度小于480px時的CSS樣式*/
}
@media screen and (min-width: 481px) and (max-width: 768px){
/*在網頁寬度在481px和768px之間時的CSS樣式*/
}
@media screen and (min-width: 769px) and (max-width: 1024px){
/*在網頁寬度在769px和1024px之間時的CSS樣式*/
}
@media screen and (min-width: 1025px){
/*在網頁寬度大于1025px時的CSS樣式*/
}

上面的代碼段使用了CSS媒體查詢（media query）來適配不同的網頁寬度。我們使用@media關鍵字來定義不同寬度下的CSS樣式，然后通過and運算符來表示不同的寬度區間。例如，在上述代碼中，當網頁寬度小于480px時，我們就會應用@media screen and (max-width: 480px)中定義的CSS樣式。

接下來讓我們看一個例子，如何使用CSS自適應來適配不同的分辨率。

/* 定義默認樣式 */
.box {
width: 500px;
height: 300px;
background-color: red;
}
/* 分辨率為2倍時的樣式 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.box {
width: 1000px;
height: 600px;
}
}

在上述代碼中，我們首先定義了一個默認的CSS樣式，這個樣式會應用到大多數設備上。然后，我們使用@media關鍵字來定義分辨率為2倍時的CSS樣式，這個分辨率一般出現在高清屏上。我們在上面的代碼中使用了-webkit-min-device-pixel-ratio: 2來判斷設備是否是高清屏，如果是高清屏就應用@media only screen and (-webkit-min-device-pixel-ratio: 2)中定義的CSS樣式。

總結一下，CSS自適應技術通過使用媒體查詢等方式可以讓網頁適應不同的設備和分辨率，提高網頁的響應性和用戶體驗。但是，在使用這個技術時需要注意兼容性問題，因為并不是所有的瀏覽器和設備都支持CSS自適應。