移动Web开发——rem适配布局（七）
作者：互联网
rem适配布局（七）
1. 用技术1实现苏宁首页
苏宁首页访问链接：https://m.suning.com/.
（1）技术选型
方案：采取单独制作移动页面方案
技术：布局采取rem适配布局（less + rem + 媒体查询）
设计图：采取750px设计尺寸
（2）搭建相关文件结构
（3）设置视口标签以及初始化样式
html代码
// 初始化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<link rel="stylesheet" href="css/normalize.css" />
<title>苏宁首页</title>
</head>
<body>
</body>
</html>
（4）通过Less设置常见的屏幕尺寸 修改html文字大小
尺寸划分的份数我们定为15等份，因为pc端也可以打开苏宁移动端首页，所以我们默认html字体大小为50px
我们关心的尺寸有320px 360px 375px 384px 400px 414px 424px 480px 540px 720px 750px
新建一个less文件，命名为common.less
Less 代码
html{
font-size: 50px;
}
a{
text-decoration: none;
}
@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 iphone678
@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;
}
}
生成的CSS代码
html{
font-size: 50px;
}
a{
text-decoration: none;
}
@media screen and (min-width: 320px) {
html {
font-size: 21.33333333px;
}
}
@media screen and (min-width: 360px) {
html {
font-size: 24px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 25px;
}
}
@media screen and (min-width: 384px) {
html {
font-size: 25.6px;
}
}
@media screen and (min-width: 400px) {
html {
font-size: 26.66666667px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 27.6px;
}
}
@media screen and (min-width: 424px) {
html {
font-size: 28.26666667px;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 32px;
}
}
@media screen and (min-width: 540px) {
html {
font-size: 36px;
}
}
@media screen and (min-width: 720px) {
html {
font-size: 48px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 50px;
}
}
（5）首页样式
新建一个less文件，命名为index.less，将刚才设置好的common.less引入到index.less里
语法格式//index.less 导入 common.less文件
@import "common"
保存后index.css里有了和common.css一样的样式，生成的index.css引入到html页面
（6）body样式
less代码以及生成的css代码
body{
min-width: 320px;
width: 15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #F2F2F2;
}
（7）顶部搜索模块（简略做法）
html代码
<!--顶部搜索-->
<div class="search-content">
<a href="#" class="classify"></a>
<div class="search">
<form>
<span class="search-icon"></span>
<input type="search" value="进口爆款第2件半价" />
</form>
</div>
<a href="#" class="login"></a>
</div>
Less代码
//顶部搜索
@baseFont: 50;
.search-content{
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 15rem;
height: 88rem / @baseFont;
background-color: #B49DF8;
.classify{
width: 36rem / @baseFont;
height: 60rem / @baseFont;
background: url(../images/classify.png) no-repeat;
//背景缩放
background-size: 36rem / @baseFont 60rem / @baseFont;
margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
}
.search{
flex: 1;
text-align: center;
position: relative;
.search-icon{
position: absolute;
top: 26rem / @baseFont;
left: 45rem / @baseFont;
width: 36rem / @baseFont;
height: 36rem / @baseFont;
background: url(../images/search-icon.png) no-repeat;
background-size: 36rem / @baseFont 36rem / @baseFont;
}
input{
width: 522rem / @baseFont;
border: 0;
height: 64rem / @baseFont;
border-radius: 32rem / @baseFont;
background-color: #fff;
margin-top: 12rem / @baseFont;
outline: none;
font-size: 25rem / @baseFont;
line-height: 64rem / @baseFont;
padding-left: 60rem / @baseFont;
color: #757575;
}
}
.login{
width: 36rem / @baseFont;
height: 60rem / @baseFont;
background: url(../images/login.png);
background-size: 36rem / @baseFont 60rem / @baseFont;
margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
}
}
Less代码生成的CSS代码
.search-content {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 15rem;
height: 1.76rem;
background-color: #B49DF8;
}
.search-content .classify {
width: 0.72rem;
height: 1.2rem;
background: url(../images/classify.png) no-repeat;
background-size: 0.72rem 1.2rem;
margin: 0.22rem 0.5rem 0.14rem 0.48rem;
}
.search-content .search {
flex: 1;
text-align: center;
position: relative;
}
.search-content .search .search-icon {
position: absolute;
top: 0.52rem;
left: 0.9rem;
width: 0.72rem;
height: 0.72rem;
background: url(../images/search-icon.png) no-repeat;
background-size: 0.72rem 0.72rem;
}
.search-content .search input {
width: 10.44rem;
border: 0;
height: 1.28rem;
border-radius: 0.64rem;
background-color: #fff;
margin-top: 0.24rem;
outline: none;
font-size: 0.5rem;
line-height: 1.28rem;
padding-left: 1.2rem;
color: #757575;
}
.search-content .login {
width: 0.72rem;
height: 1.2rem;
background: url(../images/login.png);
background-size: 0.72rem 1.2rem;
margin: 0.22rem 0.5rem 0.14rem 0.48rem;
}
效果图
（8）banner模块和广告模块
因为图片，颜色做起来非常不方便，所以简略做的，颜色不是很搭
html代码
<!--banner部分-->
<div class="banner">
<img class="img1" src="images/banner.png" />
<img class="img2" src="images/banner1.webp" />
</div>
<!--广告部分-->
<div class="ad">
<a href="#"><img src="upload/ad1.webp"/></a>
<a href="#"><img src="upload/ad2.webp"/></a>
<a href="#"><img src="upload/ad3.webp"/></a>
</div>
Less代码
//banner模块
.banner{
text-align: center;
width: 750rem / @baseFont;
height: 614.75rem / @baseFont;
background-color: #B49DF8;
.img1{
width: 700rem / @baseFont;
height: 368rem / @baseFont;
}
.img2{
width: 750rem / @baseFont;
height: 234.75rem / @baseFont;
}
}
//广告模块
.ad{
display: flex;
a{
flex: 1;
img{
width: 100%;
}
}
}
Less生成的CSS代码
var foo = 'bar';
```.banner {
text-align: center;
width: 15rem;
height: 12.295rem;
background-color: #B49DF8;
}
.banner .img1 {
width: 14rem;
height: 7.36rem;
}
.banner .img2 {
width: 15rem;
height: 4.695rem;
}
.ad {
display: flex;
}
.ad a {
flex: 1;
}
.ad a img {
width: 100%;
}
效果图（略丑）
（9）导航栏模块（底部之上就做到这里）
html代码
// <!--导航栏部分-->
<div class="nav">
<a href="#">
<img src="upload/nav1.png" />
<div class="title">苏宁秒杀</div>
</a>
<a href="#">
<img src="upload/nav2.png" />
<div class="title">苏宁超市</div>
</a>
<a href="#">
<img src="upload/nav3.png" />
<div class="title">苏宁拼购</div>
</a>
<a href="#">
<img src="upload/nav4.png" />
<div class="title">手机数码</div>
</a>
<a href="#">
<img src="upload/nav5.png" />
<div class="title">苏宁家电</div>
</a>
<a href="#">
<img src="upload/nav6.png" />
<div class="title">免费水果</div>
</a>
<a href="#">
<img src="upload/nav7.png" />
<div class="title">super会员</div>
</a>
<a href="#">
<img src="upload/nav8.png" />
<div class="title">签到有礼</div>
</a>
<a href="#">
<img src="upload/nav9.png" />
<div class="title">领券中心</div>
</a>
<a href="#">
<img src="upload/nav10.png" />
<div class="title">更多频道</div>
</a>
</div>
Less代码
//导航栏模块
.nav{
width: 750rem / @baseFont;
a{
float: left;
width: 150rem / @baseFont;
height: 142rem / @baseFont;
text-align: center;
img{
display: block;
width: 84rem / @baseFont;
height: 84rem / @baseFont;
margin: 10rem / @baseFont auto 0;
}
.title{
font-size: 20rem / @baseFont;
color: #666;
}
}
Less生成的CSS代码
.nav {
width: 15rem;
}
.nav a {
float: left;
width: 3rem;
height: 2.84rem;
text-align: center;
}
.nav a img {
display: block;
width: 1.68rem;
height: 1.68rem;
margin: 0.2rem auto 0;
}
.nav a .title {
font-size: 0.4rem;
color: #666;
}
效果图
（10）底部模块
html代码
<!--底部部分-->
<div class="foot-content">
<a href="#">
<img src="upload/guess.png" />
<div class="guess">猜你喜欢</div>
</a>
<a href="#">
<img src="upload/classify.png" />
<div>分类</div>
</a>
<a href="#">
<img src="upload/list.png" />
<div>排行榜</div>
</a>
<a href="#">
<img src="upload/shop.png" />
<div>购物车</div>
</a>
<a href="#">
<img src="upload/mine.png" />
<div>我的易购</div>
</a>
</div>
Less代码
//底部模块
.foot-content{
position: fixed;
display: flex;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 15rem;
height: 100rem / @baseFont;
background-color: #fff;
text-align: center;
img{
display: block;
width: 48rem / @baseFont;
height: 48rem / @baseFont;
margin: 12rem / @baseFont auto 0;
}
a{
flex: 1;
}
div{
color: #000;
font-size: 20rem / @baseFont;
}
.guess{
font-weight: bold;
}
}
Less生成的CSS代码
.foot-content {
position: fixed;
display: flex;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 15rem;
height: 2rem;
background-color: #fff;
text-align: center;
}
.foot-content img {
display: block;
width: 0.96rem;
height: 0.96rem;
margin: 0.24rem auto 0;
}
.foot-content a {
flex: 1;
}
.foot-content div {
color: #000;
font-size: 0.4rem;
}
.foot-content .guess {
font-weight: bold;
}
效果图（我给了body一个高度，方便展示效果）
标签：Web,baseFont,适配,width,html,rem,font,size 来源： https://blog.csdn.net/zhr_beyond/article/details/114260183