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

 适配方案1

        设计稿常见尺寸宽度

            iphone 4 5    640px

            iphone 6 7 8  750px

            android  320 360 375 384 400 414 500 720px大部分4.7~5的安卓设备为720px

        一般情况下，我们一一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750为准。

 

        2.动态设置html标签font-size大小

            1.假设设计稿是750px

            2.假设我们把整个屏幕划分为15等分（划分标注不一，可以是20也可以是10）

            3.每一分作为html字体大小，这里就是50px

            4.那么在320px设备的时候，字体大小为320/15就是21.33px

            5.用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的

            6.比如我们以750为标准设计稿

            7.一个100*100像素的页面元素在750屏幕下，就是100/50转换为rem是2rem*2rem比例是1比1

            8.320屏幕下，html字体大小为21.33则2rem=42.66px此时宽和高都是42.66但是宽和高的比例还是1比1

            9.但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果。

        3.元素大小取值方法

            1.最后的公式：页面元素的rem值 = 页面元素值（px）/（屏幕宽度/划分的份数）

            2.屏幕宽度/划分的份数就是html font-size的大小

            3.或者：页面元素的rem值 = 页面元素之（px）/html font-size字体大小

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;
            }
        }
        
    }
}

common.less

/* 如果用pc端打开，一定要写到最上面 */
html{
    font-size: 50px;
}
/* 设置常见的屏幕尺寸，修改里面的html文字大小*/
/* 这里规定划分的份数为15 */
@no: 15;
/* 320 */
@media screen and (min-width:320px){
    html{
        font-size: 320px / @no;
    }
}
/* 360 */
@media screen and (min-width:360px){
    html{
        font-size: 360px / @no;
    }
}
/* 375 iphone 6 7 8 */
@media screen and (min-width:375px){
    html{
        font-size: 375px / @no;
    }
}
/* 384 */
@media screen and (min-width:384px){
    html{
        font-size: 384px / @no;
    }
}
/* 400 */
@media screen and (min-width:400px){
    html{
        font-size: 400px / @no;
    }
}
/* 414 */
@media screen and (min-width:414px){
    html{
        font-size: 414px / @no;
    }
}
/* 424 */
@media screen and (min-width:424px){
    html{
        font-size: 424px / @no;
    }
}
/* 480 */
@media screen and (min-width:480px){
    html{
        font-size: 480px / @no;
    }
}
/* 540 */
@media screen and (min-width:540px){
    html{
        font-size: 540px / @no;
    }
}
/* 720 */
@media screen and (min-width:720px){
    html{
        font-size: 720px / @no;
    }
}
/* 750 */
@media screen and (min-width:750px){
    html{
        font-size: 750px / @no;
    }
}

 

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>