在前端開發中，移動設備越來越普及，而且不同設備的尺寸和分辨率也各不相同。為了適應各種設備，我們需要用到CSS自適應高度和等比例寬度進行頁面布局。

CSS自適應高度就是讓元素的高度隨著寬度的改變而自適應調整。這種技術在移動設備中非常實用，因為屏幕尺寸較小，需要讓頁面元素能夠自適應調整大小，才能讓用戶體驗到更好的效果。

而等比例寬度是指頁面中的圖片或者視頻等元素，都能夠根據容器的大小等比例縮放，以達到更好的視覺效果。例如，在移動頁面中，我們會讓圖片等元素按比例縮小，以適應不同尺寸屏幕的顯示需求。

// CSS自適應高度的實現
.container {
width: 90%;
height: auto;
display: flex;
flex-wrap: wrap;
}
.item {
width: 25%;
height: 0;
padding-bottom: 25%;
background-color: #ccc;
margin: 2.5%;
}
// 等比例寬度的實現
.container {
width: 90%;
display: flex;
flex-wrap: wrap;
}
.img {
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
}

這是兩種常用的CSS布局技巧，它們的實現方法相對簡單，但卻能在頁面設計中發揮巨大作用，提供更好的用戶體驗。我們在設計移動端頁面時，要特別注意這些細節，以適應越來越多樣化的移動設備。