首页 > 其他分享> 文章详细

移动Web开发——rem适配布局（七）

2021-03-01 23:30:03 阅读：222 来源： 互联网

标签：Web baseFont 适配 width html rem font size

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

移动Web开发——rem适配布局（七）

rem适配布局（七）

1. 用技术1实现苏宁首页

（1）技术选型

（2）搭建相关文件结构

（3）设置视口标签以及初始化样式

（4）通过Less设置常见的屏幕尺寸 修改html文字大小

（5）首页样式

（6）body样式

（7）顶部搜索模块（简略做法）

（8）banner模块和广告模块

（9）导航栏模块（底部之上就做到这里）

（10）底部模块

（4）通过Less设置常见的屏幕尺寸修改html文字大小