移动端h5页面 rem布局解决方案

最新推荐文章于 2025-04-01 11:28:16 发布

gengdadada

最新推荐文章于 2025-04-01 11:28:16 发布

阅读量1.3k

点赞数

分类专栏：移动h5页面rem布局文章标签：移动h5页面rem布局

本文链接：https://blog.youkuaiyun.com/weixin_43943967/article/details/89356136

版权

移动h5页面rem布局专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用原生JS实现的屏幕尺寸适配方案，通过监听窗口变化，动态调整根元素字体大小，确保网页在不同设备上显示一致。

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

1.首页你只需在页面引入这段原生js代码就可以了
在这里插入图片描述
pxtorem.js

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=640){
              // 这里的640 取决于设计稿的宽度
                docEl.style.fontSize = '100px';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                 /*
                    640   clientWidth
                    100   x
                  * 
                  * */
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);