关于移动端rem布局写法

最新推荐文章于 2024-02-08 08:57:49 发布

RAnsfly

最新推荐文章于 2024-02-08 08:57:49 发布

阅读量230

点赞数

分类专栏： js 文章标签：移动端 rem

本文链接：https://blog.csdn.net/qq_39010858/article/details/98751878

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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；