移动端适配-动态计算rem

2020-03-17 16:01:19来源:博客园 阅读 ()

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

移动端适配-动态计算rem

直接以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/hjptopshow/p/9382448.html

https://www.cnblogs.com/Sky-Ice/p/9596420.html


原文链接:https://www.cnblogs.com/zhinian-/p/12511239.html
如有疑问请与原作者联系

标签:HTMLIEBugtimClassfunction

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:准备转行web前端,该怎么从头学好?

下一篇:移动端常见问题(H5兼容性+JS兼容性+css3兼容性)