简单的方式实现rem布局

    <script>
        function resetFontSize() {
            var baseFontSize = 100
            var designWidth = 1920//标准设备宽度1rem=100px
            var width = window.innerWidth
            var currentFontSize = (width / designWidth) * baseFontSize
            document.getElementsByTagName('html')[0].style.fontSize = currentFontSize + 'px'
        }
        window.onresize = function () {
            resetFontSize()
        };
        resetFontSize()
    </script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            overflow: auto;
            font-size: .28rem;
        }
        .box{
            width:7.5rem;
            height: 1rem;
            background: #000;
        }
    
    </style>

  

posted @ 2020-12-16 11:41  慕城蓝就  阅读(149)  评论(0编辑  收藏  举报