vue中用rem自适应

1.在 的App.vue中写如下代码:

<template>

  <div id="app">

  <Header></Header>

  <router-view></router-view>

  </div>

</template>

<script>

import Header from '@/components/Header.vue'

export default {

//注册组件

  components: {

Header,

  },

  created(){

  this.resetWidth()

  },

  methods:{

resetWidth(){

let baseWidth =  document.documentElement.clientWidth||document.body.clientWidth;

document.documentElement.style.fontSize=baseWidth*100/375 +"px";

console.log(baseWidth);

}

} 

};

</script>

<style>

</style>

2.在index.html文件中:

html{font-size: 100px;}

body{font-size: 16px;}