分享一个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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值