移动端适配屏幕

这里说两种移动端适配的方法，一种是通过js，一种是通过vw。

1）在assets下创建js文件，用来放置phone.js文件，文件内容，如下所示：

(function (doc,win){
  var doEl=doc.documentElement,
    reseizeEvt = 'orientationchange' in window ? 'orientationchange':'resize',
    recalc=function (){
    var clientWidth=doEl.clientWidth;
    if(!clientWidth) return;
    if(clientWidth>=750){
      doEl.style.fontSize='100px'
    }else{
      doEl.style.fontSize=100*(clientWidth/750)+'px';
    }
    };
  if(!doc.addEventListener) return;
  win.addEventListener(reseizeEvt,recalc,false);
  doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window);

在main.js中引入即可。

2）可以在公共样式中添加一下代码：

/*移动端布局*/
html{
    font-size: 13.333333vw;

}
/*防止字体过大*/
@media (min-width: 750px) {
    html{
        font-size: 100px;
    }
}

同样的在main.js中引入公共样式即可。