移动端rem

时间 2019-11-18

标签移动 rem 栏目无线繁體版

原文原文链接

移动端内包括微信端：设置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元素
内部元素的宽度也会减少。达到来适配视口的目的。css

下面是更好的封装


(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);