隨著手機屏幕的不斷更新換代，開發者需要做到頁面的適配以滿足用戶的需求，這就涉及到手機屏幕適配問題。在Vue框架中，采用flex布局和rem單位來實現手機屏幕適配是比較常見的方法。下面將詳細介紹這兩種方法的使用和實現。

使用flex布局：在Vue中，通過使用flex布局，可以很方便地實現頁面的適配。首先，在父元素中設置display為flex，就可以把子元素進行自適應布局。這時，通過使用比例計算子元素所占比例即可實現頁面的適配。例如，如果一個屏幕等分成4份，在子元素中設置flex為1即可讓每個子元素占據1/4的屏幕大小。

.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1;
}

使用rem單位：使用rem單位可以讓網頁根據不同屏幕大小進行自適應。rem單位是相對于根元素（HTML）字體大小的相對單位。網頁默認字體大小為16px，當設置1rem等于10px時，就可以很方便地實現頁面適配，而不用擔心不同屏幕大小導致頁面元素變形。

html {
font-size: 625%;
}
.box {
width: 1rem;
height: 1rem;
}

以上是兩種常見的適配方式，但需要注意的是，這只是一種相對的適配，在不同屏幕上顯示效果會有所不同。例如，在大屏幕上，頁面元素會變得非常小，而在小屏幕上，頁面元素會相對較大。

最后需要注意的是，在設計頁面時，應該根據不同屏幕大小，設計不同的布局和樣式，這樣才能實現更好的自適應效果。