對于前端開發(fā)來說，移動端和PC端的頁面適配問題是一個不可避免的問題。在Vue開發(fā)中，我們也要考慮如何解決這個問題，以適應不同分辨率設(shè)備上的顯示效果。

首先，我們需要知道不同設(shè)備的屏幕分辨率和DPR（設(shè)備像素比）以及如何設(shè)置viewport。在移動端，一般將viewport設(shè)置為:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

其中width=device-width表示以設(shè)備寬度為基準，initial-scale=1.0表示初始縮放比例為1。這樣設(shè)置可以讓移動端頁面自適應不同尺寸的設(shè)備，同時解決了多倍屏的DPR問題。

接下來是具體的適配方式。我們可以使用CSS3的媒體查詢@media來實現(xiàn)不同分辨率下的樣式設(shè)置，例如:

/*移動端樣式*/
@media screen and (max-width: 750px) {
/*樣式設(shè)置*/
}
/*PC端樣式*/
@media screen and (min-width: 751px) {
/*樣式設(shè)置*/
}

使用@media可以根據(jù)屏幕尺寸設(shè)置不同的樣式，從而實現(xiàn)移動端和PC端適配。但是這種方式有一個問題，那就是不能完全適應所有設(shè)備的分辨率。因為目前設(shè)備的分辨率種類繁多，而且不同廠商的分辨率標準也不同。因此，我們需要更高級的適配方式來解決這個問題。

推薦使用rem適配方式。rem（font size of the root element）是相對于根元素（即html元素）的字體大小，可以實現(xiàn)根據(jù)屏幕分辨率自動調(diào)整字體大小的效果。我們可以通過設(shè)置根元素的font-size來實現(xiàn)適配，例如:

// 設(shè)置根元素字體大小為屏幕寬度的1/10
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

這樣設(shè)置之后，我們就可以使用rem作為單位進行開發(fā)。例如：

/*移動端自適應字體*/
font-size: 16px;
font-size: 1.6rem; /*屏幕寬度為375px時字體大小為10px*/

以上就是Vue移動端和PC端適配的常用方式。使用@media可以對不同分辨率設(shè)備進行適配，而使用rem可以實現(xiàn)更高級的自適應效果。在實際開發(fā)中，我們可以根據(jù)具體的需求選擇不同的適配方式，以實現(xiàn)最佳的顯示效果。