移动端(阿里rem)布局

时间 2019-11-30 标签移动阿里 rem 布局
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
    <script>
        //经过window.screen.width获取屏幕的宽度
        var offWidth = window.screen.width / 30; //这里用宽度/30表示1rem取得的px
        document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值复制给顶级标签html的font-size
    </script>
    <style>
        /*偷个懒就直接全局初始化了*/
        
        * {
            padding: 0;
            margin: 0;
        }
        /* 布局需求,上下都间隔*/
        
        div {
            margin: 0.833333333rem 0;
        }
        /* 去处a标签的下划线*/
        
        a {
            text-decoration: none;
        }
        
        .one {
            width: 30rem;
            /*100/720*30*/
            height: 4.166666667rem;
            /*图片宽750,高100*/
            background: url("./img/1.jpg") no-repeat;
            background-size: contain;
        }
        
        .two {
            width: 30rem;
            /*400/720*30*/
            height: 16.6666667rem;
            /*图片宽750,高400*/
            background: url("./img/2.jpg") no-repeat;
            background-size: contain;
        }
        
        .three {
            width: 30rem;
            height: 5.875rem;
            /*图片宽750,高141*/
            background: url("./img/3.jpg") no-repeat;
            background-size: contain;
        }
        
        .four {
            width: 28.33333333rem;
            height: 13.16666667rem;
            /*图片宽750,高316*/
            background: url("./img/4.jpg") no-repeat;
            background-size: contain;
            margin-left: 0.833333333rem;
            position: relative;
        }
        
        span {
            position: absolute;
            display: block;
            width: 8.33333333rem;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            background: #fff;
            right: 0.833333333rem;
            bottom: 0.833333333rem;
            font-size: 0.95833333rem;
            color: red;
            cursor: pointer;
        }
        
        .five {
            width: 28.33333333rem;
            height: 13.16666667rem;
            /*图片宽750,高316*/
            background: url("./img/top4.jpg") no-repeat;
            background-size: contain;
            margin-left: 0.833333333rem;
        }
    </style>

</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four">
        <a href=""><span>25元起</span></a>
    </div>
    <div class="five"></div>
</body>

</html>