js实现rem布局

来源:互联网 发布:手机免root数据恢复apk 编辑:程序博客网 时间:2024/06/10 15:53
;(function(designWidth, maxWidth) {    var doc = document,        win = window;    var docEl = doc.documentElement;    var tid;    var rootItem,rootStyle;    function refreshRem() {        var width = docEl.getBoundingClientRect().width;        if (!maxWidth) {            maxWidth = 540;        };        if (width > maxWidth) {            width = maxWidth;        }        //与淘宝做法不同,直接采用简单的rem换算方法1rem=100px        var rem = width * 100 / designWidth;        //兼容UC开始        rootStyle="html{font-size:"+rem+'px !important}';        rootItem = document.getElementById('rootsize') || document.createElement("style");        if(!document.getElementById('rootsize')){        document.getElementsByTagName("head")[0].appendChild(rootItem);        rootItem.id='rootsize';        }        if(rootItem.styleSheet){        rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)        }else{        try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}        }        //兼容UC结束        docEl.style.fontSize = rem + "px";    };    refreshRem();    win.addEventListener("resize", function() {        clearTimeout(tid); //防止执行两次        tid = setTimeout(refreshRem, 300);    }, false);    win.addEventListener("pageshow", function(e) {        if (e.persisted) { // 浏览器后退的时候重新计算            clearTimeout(tid);            tid = setTimeout(refreshRem, 300);        }    }, false);    if (doc.readyState === "complete") {        doc.body.style.fontSize = "16px";    } else {        doc.addEventListener("DOMContentLoaded", function(e) {            doc.body.style.fontSize = "16px";        }, false);    }})(640, 640);
原创粉丝点击