CSS為網頁設計者提供了很多調整頁面布局以及視覺效果的方法。其中，自動適配不同分辨率的設備就是一個很重要的特性。

當我們在電腦上打開一個網頁的時候，頁面上的文字和圖片都會以我們電腦屏幕的分辨率為基準進行顯示。但是，當我們打開同樣的網頁，但是在屏幕分辨率更高或更低的設備上瀏覽時，這個頁面的布局和大小就可能會發生變化。要解決這個問題，我們需要使用CSS的自適應特性。

其中，重要的一個概念就是“響應式設計”，也就是能夠自動適應不同設備和分辨率的網頁設計。通過CSS，我們可以為不同的設備設置不同的CSS樣式，使得同一個網頁在不同的設備上都能夠展示最佳效果。

@media screen and (max-width: 640px) {
body {
font-size: 14px;
}
img {
width: 100%;
height: auto;
}
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
body {
font-size: 16px;
}
img {
width: 80%;
height: auto;
}
}
@media screen and (min-width: 1025px) {
body {
font-size: 18px;
}
img {
width: 60%;
height: auto;
}
}

上面這個CSS代碼片段就是一個常見的自適應示例。它根據屏幕的寬度來適應字體大小和圖片大小。當屏幕寬度小于等于640px時，字體大小為14px，圖片寬度為100%，高度自動調整。當屏幕寬度在641px到1024px之間時，字體大小為16px，圖片寬度為80%，高度自動調整。當屏幕寬度大于等于1025px時，字體大小為18px，圖片寬度為60%，高度自動調整。

這樣一來，我們就可以設計出不同設備上都能夠適配的網頁了。