rem.js +vue 实现移动端适配

1、新建一个js文件 rem.js，代码如下

(function(doc,win){
    var flex = function() {
        var docEl = doc.documentElement;
        var deviceWidth = docEl.clientWidth > 500 ? 500 : docEl.clientWidth;
        docEl.style.fontSize = deviceWidth / 7.5 + "px";//如果设计图是320的话就除以3.2，这个值是根据设计稿来的哦！这点要注意
    };
    flex();
    win.addEventListener('resize', flex, false);
})(document,window);

2、把 rem.js文件在main.js里引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import "common/js/rem.js"  //引入自己rem.js的路径

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3、在.vue文件里按照设计稿编写样式就可以，px和rem怎样换算呢：
如果设计稿是24px 那么就写 .24rem 就可以 设计稿的值/100=实际rem的值
eg：

.box {
    padding: .24rem;  //设计稿的像素是24px  24px/100=0.24rem
}