1. 程式人生 > >分享一個rem的自動計算js

分享一個rem的自動計算js

<!--動態計算rem程式碼-->
<script>
    (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); </script>