页面随着屏幕尺寸发生改变更改rem得值

1.在根目录下新建一个untils文件夹，在文件夹里新建rem.js文件

// 如果页面发生改变更改rem得值
function setRem() {
    // 默认使用100px作为基准大小
    const baseSize = 100;
    const baseVal = baseSize / 1920;
    const vW = window.innerWidth; // 当前窗口的宽度
    const rem = vW * baseVal; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
    window.$size = rem / 100;
    document.documentElement.style.fontSize = rem + "px";
}
// 初始化
setRem();
// 每次窗口发生改变时窗口大小变化时重置 rem
window.onresize = function () {
    setRem();
};

2.在main.js文件中引入

import '@/utils/rem.js'

3.在app.vue里

html,
body {
  height: 100%; // 把屏幕撑开
  width: 100%; 
}
#app {
  height: 100%;
  width: 100%;
  font-size: 0.16rem;  // 默认字体大小 0.16rem相当于16px
}