天天看点

关于移动端rem布局写法

<script>
        function fs() {
            var deviceWidth = document.documentElement.clientWidth;
            if(deviceWidth > 750) deviceWidth = 750;
            document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
        }
        fs();
        window.onresize = fs;
        
        // (function(doc, win) {
        //     var docEl = doc.documentElement,//获取html标签
        //     //orientationchange方向改变事件
        //         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        //         recalc = function() {
        //             //当前设备视口宽度
        //             var clientWidth = docEl.clientWidth;
        //             if (!clientWidth) return;
        //             docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        //             // docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        //         };
        //     if (!doc.addEventListener) return;
        //     win.addEventListener(resizeEvt, recalc, false);
        //     doc.addEventListener('DOMContentLoaded', recalc, false);
        // })(document, window);
 </script>
           

两种写法大同小异,这里都是根据UI设计图尺寸750px写的,如有需要则根据UI图尺寸更改即可,

换算方式就是1rem=100px;