rem布局 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            width: 9.8rem;
            height: 2.45rem;
            margin: 0 auto;
        }
        section>div{
            float: left;
            width: 2.45rem;
            height: 2.45rem;
            border-right: 1px solid #ccc;
            position: relative;
            box-sizing: border-box;
        }
        section>div .tu{
            width: 1.2rem;
            height: 1.2rem;
            background-image:url(home-fivemain-sprite2x@v7.15.png);
            position: absolute;
            background-size:2.85rem auto;
            background-position:-1.245rem -4.65rem;
            top: 0.2rem;
            left:50%;
            margin-left: -0.6rem;
        }
    </style>
</head>
<body>
    <section>
        <div>
            <div class="tu"></div>
        </div>
        <div>
            <div class="tu"></div>
        </div>
        <div>
            <div class="tu"></div>
        </div>
        <div>
            <div class="tu"></div>
        </div>
    </section>

    <script>
        s();

        window.onresize = s;

        function s(){
            // 读取浏览器的屏幕宽度
            var windowWidth = document.documentElement.clientWidth;
            // 看当前的屏幕宽度是设计图600宽度的多少倍
            var rate = windowWidth / 600;
            // 就要字号设置为60的多少倍，所以一行就是10rem
            document.documentElement.style.fontSize = 60 * rate + 'px';
        }
    </script>
</body>
</html>

喜欢的小伙伴可以关注我的微信公众号“前端伪大叔”

 

posted @ 2019-10-20 10:41  前端伪大叔  阅读(535)  评论(0)  编辑  收藏  举报