rem布局封装
2019-11-01 本文已影响0人
Sanyekui
rem 是 css 的长度单位，它是相对于<html>元素的 font-size 的相对值。
这里根据设备宽度定义了1rem为50px，设备宽度为750
// 1rem=50px 真实设备
// 1rem=100px设计图
function rem (doc, win) {
let docEl = doc.documentElement; //html 考虑以及兼容了 屏幕旋转的事件
//判断事件orientationchange 横屏 事件 或resize
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
let recalc = function () {
var clientWidth = docEl.clientWidth; //获取屏幕大小
if (!clientWidth){ return }; //未获取屏幕尺寸
//屏幕大于750
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
// html的font-size 100* 设备宽度 / 750
docEl.style.fontSize = 100*(clientWidth /750)+ 'px';
}
};
if (!doc.addEventListener) {return ;}//addEventListener 兼容判断
win.addEventListener(resizeEvt, recalc, false);// 屏幕大小以及旋转变化自适应
doc.addEventListener('DOMContentLoaded', recalc, false);// 页面初次打开自适应
recalc();
}
rem(document,window);
image.png
