天天看點

關于移動端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;