dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 955|回复: 0

[Javascript] 移动端适配-动态计算rem

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3987

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3987

    发表于 2020-3-17 18:06:50 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    直接以750px设计稿为例:




    [JavaScript] 纯文本查看 复制代码
    (function(designWidth, maxWidth) {
                var doc = document,
                    win = window;
                var docEl = doc.documentElement;
                var remStyle = document.createElement("style");
                //获取基准字体大小
                function refreshRem() {
                    // var width = parseInt(window.screen.width); // uc有bug
                    var width = docEl.getBoundingClientRect().width;
                    if (!maxWidth) {
                        maxWidth = 750;
                    };
                    if (width > maxWidth) {
                        width = maxWidth;
                    }
                    var rem = width/designWidth*100;
                    //得到的rem基准字体大小,这里乘以100是为了适配有的浏览器不识别小数,会导致设置字体无效。
                    //设置根元素html的字体大小为基准字体大小,在css中每rem就是这个值的大小。
                    remStyle.innerHTML = 'html{font-size:' + rem + 'px;} ';
                }
                refreshRem();
                if (docEl.firstElementChild) {
                    docEl.firstElementChild.appendChild(remStyle);
                } else {
                    var wrap = doc.createElement("div");
                    wrap.appendChild(remStyle);
                    doc.write(wrap.innerHTML);
                    wrap = null;
                }
                /* 以下为在不同的时机重新计算rem*/
                win.addEventListener("resize", function() {
                    // clearTimeout(tid); //防止执行两次
                    // tid = setTimeout(refreshRem, 50);
                    refreshRem()
                }, false);
    
                win.addEventListener("pageshow", function(e) {
                    if (e.persisted) { // 浏览器后退的时候重新计算
                        refreshRem()
                        // clearTimeout(tid);
                        // tid = setTimeout(refreshRem,50);
                    }
                }, false);
            })(750, 750);




    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-12-23 21:08 , Processed in 0.458631 second(s), 31 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表