/*
 * 痛点：HTML5页面布局单位由px转换rem解决方案
 * 作者：jonyguan [309678100@qq.com]
 * 下载: git clone https://gitee.com/jonyguan/html5-px2rem.git
 * 理解：px-em-rem-percent-points.png 可以看看这个图是rem和其他单位之间的关系
 * 把屏幕100等分，我们需要根据实际页面尺寸乘以100除640得到页面根元素html字体大小font-size，比如320px屏html字体设置为50px，并限制了最大宽度640，最小宽度320，实际切图过程中，可以直接除以100就可以了，比如 width:120px 转为rem width:1.2rem 
 * HTML viewport:<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,viewport-fit=cover">
 * 解决部分老年机，微信设置了字体影响页面布局问题
 * CSS 需要给body添加样式,解决苹果微信浏览器字体不兼容问题：body{-webkit-text-size-adjust: 100% !important;}
 */
(function(doc,win) {
    var docEl = win.document.documentElement,
        tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 750) {
            width = 750;
        }
        if (width < 320) {
            width = 320;
        }
        var rem = width / 750*100;//以750px为原稿，除以100可得各元素的rem
        docEl.style.fontSize = rem + "px";
        var actualSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);
        if (actualSize !== rem) {
            var remScaled = rem / ( actualSize / rem );
            docEl.style.fontSize = remScaled + "px"
        }
    }

    function dbcRefresh() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 10);
    }

    win.addEventListener("resize", function() { dbcRefresh() }, false);
    doc.addEventListener('DOMContentLoaded', dbcRefresh(), false);
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { dbcRefresh() }
    }, false);
    refreshRem();
})(document,window);