关于使用rem为单位的封装js

最新推荐文章于 2025-05-29 19:48:58 发布

原创最新推荐文章于 2025-05-29 19:48:58 发布 · 892 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#rem

js/jq 专栏收录该内容

13 篇文章

订阅专栏

本文分享了使用rem单位进行手机端网页布局的经验，详细介绍了如何通过JavaScript动态调整根元素字体大小实现响应式设计，使页面能在不同屏幕尺寸下保持良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前通过rem来做过一个手机端的布局，发现使用起来自适应页面还是非常方便。

直接上计算的js代码.

因为设计稿是750px，所以js中是按照750px来计算的，可以自行修改。

使用时引入js，用设计稿的px数值除以75就ok

<script>
    (function(win) {
        var remCalc = {};
        var docEl = win.document.documentElement,
                tid;
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            if(width > 750) {
                width = 750
            };
            var rem = width / 10;
            docEl.style.fontSize = rem + "px";
            remCalc.rem = rem;
            var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);
            if(actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
                var remScaled = rem * rem / actualSize;
                docEl.style.fontSize = remScaled + "px"
            }
        };

        function dbcRefresh() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 100)
        };
        win.addEventListener("resize", function() {
            dbcRefresh()
        }, false);
        win.addEventListener("pageshow", function(e) {
            if(e.persisted) {
                dbcRefresh()
            }
        }, false);
        refreshRem();
        remCalc.refreshRem = refreshRem;
        remCalc.rem2px = function(d) {
            var val = parseFloat(d) * this.rem;
            if(typeof d === "string" && d.match(/rem$/)) {
                val += "px"
            };
            return val
        };
        remCalc.px2rem = function(d) {
            var val = parseFloat(d) / this.rem;
            if(typeof d === "string" && d.match(/px$/)) {
                val += "rem"
            };
            return val
        };
        win.remCalc = remCalc
    })(window);
</script>