html根元素，与rem结合适配页面

（1）新建rem.js,在main.js中引入该js
const baseSize = 14
//设置rem函数
function setRem() {
    //当前页面宽度相对于1920宽的缩放比例，可根据自己需要修改
    const scale = document.documentElement.clientWidth / 1920
    //设置页面根节点字体大小,字体大小最小为12
    let fontSize = (baseSize * Math.min(scale, 1)) > 12 ? (baseSize * Math.min(scale, 2)) : 12
    document.documentElement.style.fontSize = fontSize + 'px'
}
//初始化
setRem()

//改变窗口大小时重新设置rem
window.onresize = function () {
    setRem()
}

或者
（2）在app.vue中编写如下代码

mounted() {
      this.resize({});
      window.addEventListener('resize', this.resize);
    },
    methods: {
      resize({ designWidth = 1920, maxWidth = 2 ** 64, minWidth = 1300, base = 16 }) {
        const html = document.documentElement || document.body;
        const limitMax = maxWidth / designWidth;
        const limitMin = minWidth / designWidth;
        const scale = window.innerWidth / designWidth;
        html.style.fontSize = ((scale > limitMax ? limitMax : scale < limitMin ? limitMin : scale) * base).toFixed(2) + 'px';
      },
    }

测试代码：
css中设置样式，如font-size:16rem，拖拽页面，查看字体是否发生变化