最简单的方式实现rem布局

加上如下js，px转换成rem需要手动，计算方式：量的大小除以100，就等于rem，例如：量的设计稿元素宽度是120，那么就写成{width: 1.2rem}，这样写有什么问题，待研究，也欢迎补充

<!DOCTYPE html>

<html lang="en" style="font-size:100px">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script>

        function resetFontSize() {

            var baseFontSize = 100

            var designWidth = 750

            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>

</head>

<body>

    <div class="box"></div>

    <p>42341</p>

</body>

</html>

巴特西

最简单的方式实现rem布局

最新文章

热门文章