在Web開發中，我們經常需要讓網站頁面適應不同的屏幕分辨率，以保證在任何設備上都可以獲得良好的用戶體驗。CSS自適應屏幕分辨率是一種非常有效的方法，它可以使網頁元素在不同的屏幕上按比例縮放，以適應不同的設備。

/* 在主樣式文件中設置基本樣式 */
body{
font-size: 16px; /* 設置默認的字體大小 */
}
.container{
width: 100vw; /* 占據整個視口的寬度 */
height: 100vh; /* 占據整個視口的高度 */
}

上述代碼中，我們使用了CSS3中的vw和vh單位來指定元素尺寸。vw和vh分別表示相對于視口寬度和視口高度的百分比。例如，width: 100vw;表示元素寬度占據整個視口的100%。

/* 根據不同設備設置不同的樣式 */
@media screen and (max-width: 600px){
/* 在小屏幕設備中顯示不同的樣式 */
body{
font-size: 12px;
}
.container{
width: 90vw;
height: 90vh;
}
}

上述代碼中，我們使用了@media規則來根據設備屏幕尺寸進行樣式調整。例如，@media screen and (max-width: 600px)表示在屏幕寬度小于等于600像素時應用該規則。通過使用@media規則，我們可以很方便地根據不同的屏幕尺寸定制樣式，以獲得最佳的用戶體驗。