1. 程式人生 > >js實現rem佈局

js實現rem佈局

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