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

简单记录如下,不同手机按照宽度不同计算不同的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);

猜你喜欢

转载自blog.csdn.net/wh_xmy/article/details/84950058