vue移动端页面适配

在vue移动端页面适配中，主要有两个问题需要解决：屏幕尺寸和字体大小。为了解决这些问题，可以使用rem作为单位，并根据不同的屏幕尺寸设置不同的根字体大小。具体步骤如下：
1. 在html标签中设置根字体大小，例如设置为625%。
2. 使用媒体查询@media来根据不同的屏幕尺寸设置不同的根字体大小，例如在屏幕宽度为360px到374px之间时，设置根字体大小为703%。
3. 在样式中使用rem作为单位，例如设置一个元素的宽度为2rem。
4. 在js中动态计算根字体大小，例如将屏幕宽度分为10等分，每一份的宽度为1rem，根据屏幕宽度动态计算根字体大小。

参考代码如下：

/* 设置根字体大小 */
html {
  font-size: 625%;
}
/* 根据不同的屏幕尺寸设置根字体大小 */
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
  html {
    font-size: 703%;
  }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
  html {
    font-size: 732.4%;
  }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
  html {
    font-size: 750%;
  }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
  html {
    font-size: 781.25%;
  }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
  html {
    font-size: 808.6%;
  }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
  html {
    font-size: 843.75%;
  }
}

/* 在样式中使用rem作为单位 */
.element {
  width: 2rem;
}

/* 在js中动态计算根字体大小 */
var screenWidth = window.innerWidth;
var rootFontSize = screenWidth / 10;
document.documentElement.style.fontSize = rootFontSize + 'px';