移动端rem设置，自动更改html<font-size>

最新推荐文章于 2022-11-18 15:26:29 发布

weixin_33971205

最新推荐文章于 2022-11-18 15:26:29 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhouzhou163/p/5389665.html

本文介绍了一段JavaScript代码，通过监听窗口大小变化，动态调整网页元素的字体大小，确保不同设备上的内容呈现清晰易读。对于iPhone 4和iPhone 6等不同尺寸的屏幕，字体大小会相应调整为合适的值。

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

<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>

加入这么一段js，就可以根据屏幕的宽度动态改变font-size

根据这一句 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 可知

iphone4宽度是320px，那么font-size就是20px, 100px就是5rem

iphone6宽度是375px，那么font-size就是23.4375px,100px就是4.267rem

转载于:https://www.cnblogs.com/zhouzhou163/p/5389665.html