rem解决不同宽度手机的适配问题

China☆狼群 提交于 2019-12-07 23:43:04

简单记录如下,不同手机按照宽度不同计算不同的html的font-size,即可实现,代码如下,直接放入即可。

         var fun = function (doc, win) {
             var docEl = doc.documentElement,
             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
             recalc = function () {
                       var clientWidth = docEl.clientWidth;
                       if (!clientWidth) return;
                       //这里是假设在750px宽度设计稿的情况下,1rem = 20px;
                       //可以根据实际需要修改
                       docEl.style.fontSize = 20 * (clientWidth / 750) + 'px';
                    };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        };
        fun(document, window);

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!