vue使用rem适配各种分辨率设备
if (!//这里是假设在750px宽度设计稿的情况下,1rem = 20px;//可以根据实际需要修改// 3.90625意思是在横屏下 1rem=10pxif (!
·
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,这样转换更方便。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)