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

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

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

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

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

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

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

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

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

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

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

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