一、概述
不利用插件,手写JS实现rem与px的换算。已知1rem等于根标签的字体大小。
二、详解
如下代码所示,假设640的设计稿,设定1rem等于10px。
; (function (win) {
// 获取根标签
var docEl = document.documentElement;
// 定时器
var _t;
function refreshFn() {
// 获取窗口的宽度
var _width = docEl.getBoundingClientRect().width;
if (_width > 640) {
_width = 640;
}
var _rem = _width / 64;
// 为根标签html设置font-size,即1rem等于多少px
docEl.style.fontSize = _rem + 'px';
}
// 绑定resize事件,浏览器窗口改变大小时触发
win.addEventListener('resize', function () {
// 清空定时器
clearTimeout(_t);
// 重新设置定时器
_t = setTimeout(refreshFn, 300);
});
// 直接触发一次方法,设置rem和px的换算比例
refreshFn();
}(window));