h5页面px和rem单位的自动换算

最新推荐文章于 2025-01-09 17:08:12 发布

原创最新推荐文章于 2025-01-09 17:08:12 发布 · 4.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#h5页面px和rem单位的自动换算

H5页面专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的响应式布局方法，通过监听窗口的resize事件或orientationchange事件，动态调整根元素的字体大小，使得页面能够自适应不同尺寸的屏幕，提升用户体验。

(function(doc, win) { 
                var docE1 = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize',
                recalc = function() { 
                    var clientWidth = docE1.clientWidth;
                    if (!clientWidth) return;
                    docE1.style.fontSize = 100 * (clientWidth / 750) + 'px';
                };                
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);