美文网首页
移动端自动变更html,设置rem

移动端自动变更html,设置rem

作者: Coldhands | 来源:发表于2017-12-04 16:10 被阅读0次
    <script>        
            (function (doc, win) {    
                var docEl = doc.documentElement,    
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',    
                recalc = function () {    
                var clientWidth = docEl.clientWidth;    
                if (!clientWidth) return;    
                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';    
            };    
            if (!doc.addEventListener) return;    
            win.addEventListener(resizeEvt, recalc, false);    
            doc.addEventListener('DOMContentLoaded', recalc, false);    
            })(document, window);    
     </script>
    

    代码可以直接写在html中,也可以也成 .js 文件,方便调用。

    根据这一句 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 可知
    iphone4宽度是320px,那么font-size就是20px, 100px就是5rem
    iphone6宽度是375px,那么font-size就是23.4375px,100px就是4.267rem

    相关文章

      网友评论

          本文标题:移动端自动变更html,设置rem

          本文链接:https://www.haomeiwen.com/subject/yyyxixtx.html