CSS自動適應分辨率是前端開發中非常重要的一部分，它能夠使網頁在不同尺寸的設備上顯示出更好的效果。接下來我們將通過實例來學習CSS自動適應分辨率技術。

html{
font-size: 62.5%;
}
@media screen and (min-width: 576px){
html{
font-size: 75%;
}
}
@media screen and (min-width: 768px){
html{
font-size: 87.5%;
}
}
@media screen and (min-width: 992px){
html{
font-size: 100%;
}
}
@media screen and (min-width: 1200px){
html{
font-size: 112.5%;
}
}

以上代碼中，我們使用了媒體查詢（@media）來根據不同的設備尺寸來應用不同的CSS樣式，實現自動適應分辨率的效果。其中，設置了不同尺寸下html元素的字體大小，而其他元素的尺寸則是相對于字體大小的百分比值。

當視口寬度小于等于576px時（如手機豎屏狀態），字體大小為10px；當視口寬度大于等于576px時（如手機橫屏狀態），字體大小為12px；當視口寬度大于等于768px時（如平板設備橫豎屏狀態），字體大小為14px；當視口寬度大于等于992px時（如電腦設備窗口狀態），字體大小為16px；當視口寬度大于等于1200px時，字體大小為18px。

通過以上設置，不同設備下的網頁布局可以自動地適應相應的尺寸，使得用戶體驗更加友好和流暢。