适配方案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>