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,这样转换更方便。