js实现rem响应式

Question

/计算屏幕基准font-size比例/
(function(doc, win) {
var docEl = doc.documentElement,
dpr = win.devicePixelRatio;
resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’;
docEl.dataset.dpr = dpr;
var recalc = function() {
var width = docEl.clientWidth;
if (width / dpr > 750) {
width = 750 * dpr;
}
docEl.style.fontSize = 100 * (width / 750) + ‘px’;
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);

通过js计算来实现rem的响应式 还会有什么弊端吗

Answer 1

双越 2020-06-23 23:31:39

弊端就是需要 js 计算，而且 js 计算和 DOM 渲染还是互斥的。如果网速稍微慢一点（加载 js 慢），或者浏览器稍微卡顿一点（执行 js 速度慢），那页面可能会出现卡顿或者大小的变化。

而用 css ，那就没有 js 计算的过程，来了什么样，渲染出来就是什么样。

• 提问者 csupwj #1

  那大厂用哪种方案呀

• 双越 回复 提问者 csupwj #2

  rem 和 vw-vh 都会用。

• 慕粉3871079 回复 双越 #3

  vw vh 计算还是挺麻烦的，感觉也只能用于比较大的布局中

点开查看后面1条评论