vue项目PC端字体大小自适应

在App.vue文件中直接放入以下代码即可

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted: function () {
    // 页面开始加载时修改font-size
    var html = document.getElementsByTagName("html")[0];
    var oWidth =
      document.body.clientWidth || document.documentElement.clientWidth;
    // 这里的1920是指设计图的大小,自己根据实际情况改变
    html.style.fontSize = (oWidth / 1920) * 100 + "px";
    console.log("rem:", html.style.fontSize);
  },
};
</script>
<style lang="scss" scoped>
//这些屏幕宽度是根据我自己需要设置的
@media screen and (max-width: 1396) {
  #app {
    font-size: 0.16rem;
  }
}
@media screen and (min-width: 1396) and (max-width: 1536px) {
  #app {
    font-size: 0.5rem;
  }
}
@media screen and (min-width: 1536px) and (max-width: 1920px) {
  #app {
    font-size: 1rem;
    //我这里是按1920的屏幕宽度设置的，所以1rem相当于100px
  }
}
@media screen and (min-width: 1920px) {
  #app {
    font-size: 0.16rem;
  }
}
</style>