隨著移動互聯網越來越普及，越來越多的用戶習慣于使用移動設備訪問網站。但是，不同的設備屏幕大小和分辨率的差異巨大，對于網站的展示效果和用戶體驗提出了更高的要求。因此，CSS自適應手機高度寬度成為了一個非常重要的技能。

@media screen and (max-width: 600px) {
body {
font-size: 16px;
}
}
@media screen and (max-width: 480px) {
body {
font-size: 14px;
}
}
@media screen and (max-width: 320px) {
body {
font-size: 12px;
}
}

以上是一個簡單的CSS媒體查詢的例子，可以根據不同的設備寬度設置不同的字體大小。現在我們來看一下如何自適應手機的高度和寬度。首先，我們需要使用%或者vh,vw等相對單位，因為絕對單位如像素無法自適應不同的屏幕。

.container {
height: 100vh;
width: 100vw;
}

上面的代碼就是一個簡單的容器，它的高度和寬度都是100%。其中vh表示視口高度，vw表示視口寬度。視口就是可見區域，即瀏覽器中顯示的部分。

不過，不同的設備可能會有不同的底部導航欄或者狀態欄占據一定的高度。為了避免這些因素影響我們的布局，我們可以使用calc()函數。

.container {
height: calc(100vh - 80px);
width: calc(100vw - 40px);
}

這個例子中，我們減去了一個高度值為80px和一個寬度值為40px。這樣可以把底部狀態欄或者導航欄的高度減去，保證容器的高度和寬度都是不受干擾的。

總之，CSS自適應手機高度寬度是我們在開發響應式網站時必須要掌握的技能，而上面的例子也只是冰山一角。只有深入學習并不斷實踐，我們才能創建優秀的響應式網站，提升用戶體驗。