使用less 媒体查询 rem进行手机客户端适配练习

index.less

@import "common";
body{
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #F7F7F7;
    
}
*{
    box-sizing: border-box;
    text-align: center;
}
img{
    display: block;
}
a{
    text-decoration: none;
}
@bounce:50;
/* 顶部搜索框 */
.top{
    position: relative;
    overflow: hidden;
    &::before{
        content: "";
        position: absolute;
        height: 2000rem / @bounce;
        width: 2000rem / @bounce;
        border-radius: 2000rem / @bounce;
        z-index: -1;
        background: linear-gradient(to right,rgb(255, 220, 220),rgba(255, 0, 0, 0.658));
        left: -86.5%;
        top: -1600rem / @bounce;
    }
}
.search-content{
    position: relative;
    height: 180rem / @bounce;
    width: 15rem;
    margin: 0 auto;
   
    .search-one{
        display: flex;
        margin: 0 34rem / @bounce;
        height: 88rem / @bounce;
        padding-top: 20rem / @bounce;
        .fenlei{
            height: 60rem / @bounce;
            width: 36rem / @bounce;
            background: url("../img/lb.png");
            background-size: 36rem / @bounce;
        }
        .guanggao{
            flex: 1;
            width: 450rem / @bounce;
            height: 55rem / @bounce;
            background: url("../img/gg.gif") no-repeat 100rem / @bounce;
            background-size: 372rem / @bounce;
        }
        .login{
            height: 60rem / @bounce;
            width: 36rem / @bounce;
            background: url("../img/login.png");
            background-size: 36rem / @bounce;
        }
    }
    .search{
        position: relative;
        display: block;
        margin: 16rem / @bounce 34rem / @bounce;
        height: 60rem / @bounce;
        flex: 1;
        border-radius: 50rem / @bounce;
        background-color: #fff;
        &::before{
            content: "";
            position: absolute;
            background: url("../img/search.png");
            background-size: 36rem / @bounce;
            height: 36rem / @bounce;
            width: 36rem / @bounce;
            top: 12rem / @bounce;
            left: 20rem / @bounce;
        }
        &::after{
            content: "商品/店铺";
            position: absolute;
            font-size: .5rem;
            top: 14rem / @bounce;
            left: 70rem / @bounce;
            color: #999;
        }
    }
}
/* 轮播图 */
.slideimg{
    position: relative;
    height: 260rem / @bounce;
    width: 15rem;
    margin: 0 auto;
    overflow: hidden;
    img{
        position: absolute;
        top: -100rem / @bounce;
        border-radius: 10rem / @bounce;
        width: 14rem;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* 导航 */
.nav{
    height: 320rem / @bounce;
    width: 15rem;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    a{
        display: block;
        width: 3rem;
        height: 142rem / @bounce;
        font-size: 20rem / @bounce;
        color: #666;
        
        img{
            height: 84rem / @bounce;
            width: 84rem / @bounce;
            margin: 24rem / @bounce 33rem / @bounce 5rem / @bounce;
        }
    }
}
/* 满减 */
.manjian{
    height: 210rem / @bounce;
    width: 15rem;
    display: flex;
    a{
        height: 210rem / @bounce;
        width: 7.5rem;
        img{
            width: 7.5rem;
        }
    }
}
/* 底部 */
.footer{
    height: 190rem / @bounce;
    width: 15rem;
    position:fixed;
    bottom: 0;
    .ljdl{
        display: block;
        height: 90rem / @bounce;
        width: 15rem;
        background: url("../img/dl.png") no-repeat;
        background-size: 15rem;
    }
    .bottom{
        height: 100rem / @bounce;
        width: 15rem;
        display: flex;
        background-color: #fff;
        a{
            height: 100rem / @bounce;
            width: 3rem;
            font-size: 16rem / @bounce;
            color: #333;
            padding: 10rem / @bounce 0;
            img{
                margin: 0 47rem / @bounce;
                height: 56rem / @bounce;
                width: 56rem / @bounce;
            }
        }
        
    }
}

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>

<body>
    <div class="top">
        <div class="search-content">
            <div class="search-one">
                <a class="fenlei"></a>
                <a class="guanggao"></a>
                <a class="login"></a>
            </div>
            <a href="" class="search"></a>
        </div>
        <div class="slideimg">
            <img src="./img/1.jpg" >
        </div>
    </div>
    <nav class="nav">
        <a href="#"><img src="./img/jg.webp" alt=""> 限时抢购</a>
        <a href="#"><img src="./img/cs.webp" alt="">苏宁超市</a>
        <a href="#"><img src="./img/pg.webp" alt="">苏宁拼购</a>
        <a href="#"><img src="./img/sj.webp" alt="">爆款手机</a>
        <a href="#"><img src="./img/jd.webp" alt="">苏宁家电</a>
        <a href="#"><img src="./img/nz.webp" alt="">免费兑好物</a>
        <a href="#"><img src="./img/zq.webp" alt="">赚钱</a>
        <a href="#"><img src="./img/qd.webp" alt="">签到有礼</a>
        <a href="#"><img src="./img/lq.webp" alt="">领券中心</a>
        <a href="#"><img src="./img/gd.webp" alt="">更多频道</a>
    </nav>
    <div class="manjian">
        <a href="#"><img src="./img/asd.gif" alt=""></a>
        <a href="#"><img src="./img/nrm.gif" alt=""></a>
    </div>
    <footer class="footer">
        <a class="ljdl"></a>
        <div class="bottom">
            <a href="#"><img src="./img/xh.png" alt="">猜你喜欢</a>
            <a href="#"><img src="./img/xh.png" alt="">分类</a>
            <a href="#"><img src="./img/xh.png" alt="">必抢清单</a>
            <a href="#"><img src="./img/xh.png" alt="">购物车</a>
            <a href="#"><img src="./img/xh.png" alt="">我的易购</a>
        </div>
    </footer>
</body>

</html>