vue使用rem适配各种分辨率设备

1.首先定义一个函数

export function adapt(win, doc) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //这里是假设在750px宽度设计稿的情况下，1rem = 20px；
            //可以根据实际需要修改
            // 3.90625意思是在横屏下 1rem=10px
            docEl.style.fontSize = 10 * 3.90625 * (clientWidth / 750) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
};

2.引用后,在App.vue里面调用即可

mounted() {
    adapt(window, document);
  },

然后所有页面都可以使用rem为单位了，我的算法是pc端适配竖屏，你可以改改数字，比如docEl.style.fontSize = clientWidth / 1920+ ‘px’，控制1px=1rem,这样转换更方便。