当前位置： 移动技术网 > IT编程>网页制作>CSS > 移动端适配-动态计算rem

移动端适配-动态计算rem

2020年03月17日  | 移动技术网IT编程  | 我要评论

惊天夺宝,牧野田彩作品,茉莉清茶兑奖

直接以750px设计稿为例：

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

另外找了两篇说的比较细的文章，链接如下：

https://www.cnblogs.com/sky-ice/p/9596420.html

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网