JS动态设置rem

image.png

移动端中的使用

• rem是相对应的根标签的字体大小的系数单位
• 不同浏览器根标签的默认字体大小不一样，所以JS动态设置
• 在750的设计图下，我们为了便于开发将根元素的字体大小设置成100px
  • 100px是一个单位，是750/7.5得出
  • 道理是750，我自己分成7.5份出去，每份是100px长度，那么设计图中的一个div好比宽是160px，160/100，得出这个div占据1.6个单位，也就是1.6rem
  • 若不进行7.5的分割，那么直接将根元素设置成750px，子div比较得出 160/750 = 0.2133333 rem，太麻烦，
• 设计图一般是750px，客户屏幕超过750px，就按照最大750px，且居中显示

新建index.js文件，全局引入

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function() {
            if (docEl.clientWidth > 750) {
                docEl.style.fontSize = "100px";
                doc.getElementById("app").style.width = "750px";
            } else {
                var width = docEl.clientWidth / 7.5;
                docEl.style.fontSize = width + "px";
                doc.getElementById("app").style.width = "auto";
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

这样在任何设备和浏览器上看到了就是移动端的布局样式了，如果你的产品形态是移动端、PC端通配，代码就不能这么写了。

移动端和PC端通配

同样新建index.js文件，全局引入

//适配兼容
(function (doc, win) {
    console.log(doc, win)
    // var docEle = doc.documentElement;
    const dpr = Math.min(win.devicePixelRatio, 3),
        scale = 1 / dpr,
        resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';

    var recalCulate = function () {
        var docEle = document.documentElement,
            w = docEle.clientWidth,
            num = (w > 750 ? 750 : w) / 750;       // **此时的750就是你设计稿的尺寸
        docEle.style.fontSize = (num * 100).toFixed(1) + 'px';
    };
    recalCulate();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, recalCulate, false);
})(document, window);

参考链接：
JavaScript 中 rem 的实现和计算 - 掘金 (juejin.cn)
通过js动态设置根元素的rem方案 - SegmentFault 思否

点赞加关注，永远不迷路