const configureRem = (doc = documnet, win = window, size = 375) => {
const docEl = doc.documentElement;
const mode = 'orientationchange' in window ? 'orientationchange' : 'resize'; //
const getRem = () => {
const width = docEl.clientWidth; // 屏幕像素
let rem = width / size * 100;
docEl.style.fontSize = rem + 'px'; // 初次设定
const realSize = () => {
const vnode = document.createElement('div');
vnode.style.cssText = 'width: 1rem';
document.body.append(vnode);
const realWidth = getComputedStyle(vnode, null).getPropertyValue('width').replace('px', '');
vnode.remove();
return realWidth;
}
const vnodeWidth = realSize();
if (rem != vnodeWidth) {
rem = rem / vnodeWidth;
docEl.style.fontSize = rem * 100 + 'px';
}
}
win.addEventListener(mode, getRem, false);
doc.addEventListener('ready', getRem, false);
!doc.addEventListener ? null : getRem();
}
HTML动态配置Rem
于 2021-10-25 14:50:05 首次发布