使用flexible.js和rem方案适配手机客户端

时间:2022-04-03 18:49:17

适配方案2         更简洁更高效的rem适配方案flexible.js             手机淘宝团队出的简介高效移动端适配库             我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理             它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。             我们要做的,就是确定好我们当前设备的html文字大小就可以了             比如当前涉及稿是750px,那么我们只需要把html文字大小设置为75px(750px /10)就可以             里面页面元素rem值:页面元素的px值/75             剩余的让flexible.js来去算         给vscode添加一个插件,cssrem,这个插件默认的html文字大小cssroot 为16px,所以要根据我们的要求来修改。   index.less

body{
    min-width: 320px;
    max-width: 750px;
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
    background: #F7F7F7;
}
*{
    box-sizing: border-box;
    text-align: center;
}
img{
    display: block;
}
a{
    text-decoration: none;
}
@media screen and (min-width:750px){
    html{
        font-size: 75px!important;
    }
}
/* 顶部搜索框 */
.top{
    position: relative;
    overflow: hidden;
    &::before{
        content: "";
        position: absolute;
        height: 26.666667rem;
        width: 26.666667rem;
        border-radius: 26.666667rem;
        z-index: -1;
        background: linear-gradient(to right,rgb(255, 220, 220),rgba(255, 0, 0, 0.658));
        left: -86.5%;
        top: -21.333333rem;
    }
}
.search-content{
    position: relative;
    height: 2.4rem;
    width: 10rem;
    margin: 0 auto;
   
    .search-one{
        display: flex;
        margin: 0 .453333rem;
        height: 1.173333rem;
        padding-top: .266667rem;
        .fenlei{
            height: .8rem;
            width: .48rem;
            background: url("../img/lb.png") no-repeat;
            background-size: .48rem auto;
        }
        .guanggao{
            flex: 1;
            width: 6rem;
            height: .733333rem;
            background: url("../img/gg.gif") no-repeat 1.333333rem;
            background-size: 4.96rem auto;
        }
        .login{
            height: .8rem;
            width: .48rem;
            background: url("../img/login.png");
            background-size: .48rem auto;
        }
    }
    .search{
        position: relative;
        display: block;
        margin: .213333rem .453333rem;
        height: .8rem;
        flex: 1;
        border-radius: .666667rem;
        background-color: #fff;
        &::before{
            content: "";
            position: absolute;
            background: url("../img/search.png");
            background-size: .48rem;
            height: .48rem;
            width: .48rem;
            top: .16rem;
            left: .266667rem;
        }
        &::after{
            content: "商品/店铺";
            position: absolute;
            font-size: .32rem;
            top: .186667rem;
            left: .933333rem;
            color: #999;
        }
    }
}
/* 轮播图 */
.slideimg{
    position: relative;
    height: 3.466667rem;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    img{
        position: absolute;
        top: -1.333333rem;
        border-radius: .133333rem;
        width: 9rem;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* 导航 */
.nav{
    height: 4.266667rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    a{
        display: block;
        width: 2rem;
        height: 1.893333rem;
        font-size: .266667rem;
        color: #666;
        
        img{
            height: 1.12rem;
            width: 1.12rem;
            margin: .32rem .44rem .066667rem;
        }
    }
}
/* 满减 */
.manjian{
    height: 2.8rem;
    width: 10rem;
    display: flex;
    a{
        height: 2.8rem;
        width: 5rem;
        img{
            width: 5rem;
        }
    }
}
/* 底部 */
.footer{
    height: 2.533333rem;
    width: 10rem;
    position:fixed;
    bottom: 0;
    .ljdl{
        display: block;
        height: 1.2rem;
        width: 10rem;
        background: url("../img/dl.png") no-repeat;
        background-size: 10rem;
    }
    .bottom{
        height: 1.333333rem;
        width: 10rem;
        display: flex;
        background-color: #fff;
        a{
            height: 1.333333rem;
            width: 2rem;
            font-size: .213333rem;
            color: #333;
            padding: .133333rem 0;
            img{
                margin: 0 .626667rem;
                height: .746667rem;
                width: .746667rem;
            }
        }
        
    }
}

index.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">
    <script src="./script/flexible.js"></script>
    <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>