移动端rem

Posted 2020-10-16

移动端内包括微信端： 设置meta标签达到视口的响应式。
通过rem作单位。来匹配不同型号的手机的适配。
微信端: 一般设视口为640px。 给html元素设置 font-size:40px； html 内部最大宽度元素最大为width:16rem或 max-width:16rem。这样其html内部元素最宽就是
640px;不会超过视口的宽度。就不会出现滚动条。
通过js 脚本在html head标签内部最少影响css 重排，重绘的位置。初始就加载这段脚本
写
来达到若是视口的宽度小于640的话，就改变html元素的font-size的字体大小的宽度。从而改变html内部元素的宽度。一般视口小于640的，视口减小。html元素
内部元素的宽度也会减小。达到来适配视口的目的。

下面是更好的封装


(function(win) {
    var remCalc = {};
    var docEl = win.document.documentElement,
            tid;

    function refreshRem() {
        // 获取当前窗口的宽度
        var width = docEl.getBoundingClientRect().width;
        // 大于640px 按640算
        if (width > 640) { width = 640 }
        // 把窗口的宽度固定分为16份 也就是16rem
        // 按视觉稿640算  640/16=40px  那么1rem = 40px
        // 640视觉中 80px*80px的按钮 转换为rem  80/40 = 2rem
        // 按钮的宽高固定为 2rem * 2rem
        // 当窗口宽度缩放为 320px的时候
        // 那么 1rem = 20px
        // 原来 80px*80px的按钮现在变为 2rem * 20px = 40px
        // 按钮变为 40px * 40px
        // 其他宽度也类似
        //
        // cms做法也类似
        // 只是我们把窗口宽度固定分为 6.4份，即6.4rem
        // 所以 1rem = 100px
        // 640视觉中 80px*80px的按钮 转换为rem  80/100 = 0.8rem
        // ....其他也差不多
        //
        var rem = width / 16;  
        docEl.style.fontSize = rem + "px";

        remCalc.rem = rem;
        //误差、兼容性处理
        var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);
        if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
            var remScaled = rem * rem / actualSize;
            docEl.style.fontSize = remScaled + "px"
        }
    }

    //函数节流
    function dbcRefresh() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 100)
    }

    //窗口更新动态改变font-size
    win.addEventListener("resize", function() { dbcRefresh() }, false);

    //页面显示的时候再计算一次   
    refreshRem();
    remCalc.refreshRem = refreshRem;
    win.remCalc = remCalc
})(window);

更多比较好的适配可以参考 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
https://www.w3cplus.com/css/vw-for-layout.html