rem适配布局(完结)
1.rem适配方案(第二种)
(1)使用技术
flexible.js+rem
(2)flexible.js的原理
github地址链接: https://github.com/amfe/lib-flexible.
不需要写不同的媒体查询,js做处理
原理:把设备划分成10等份,不同设备下,比例是一致的
我们要做的是确定好当前设备的 html大小
比如当前设计稿是750px,只需要把html文字大小设置为75px(750px/10)
页面元素 rem 值 = 页面元素的px值 / 75 ,剩余的让 flexible.js 来计算
(3)下载flexible.js
2.用技术2实现苏宁首页
(1)技术选型
方案:采取单独制作移动页面方案
技术:布局采取rem适配布局2(flexible.js + rem)
设计图:采取750px设计尺寸
(2)搭建相关文件结构
(3)设置视口标签以及初始化样式和js文件
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" />
<link rel="stylesheet" href="css/index.css" />
<script src="js/flexible.js"></script>
<title>苏宁首页2</title>
</head>
<body>
</body>
</html>
引入后检查网页发现,html文字大小已经设置成功,说明引入的js有效
(4)设置body样式
body {
min-width: 320px;
width: 15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #F2F2F2;
}
a{
text-decoration: none;
}
/*如果屏幕超过750px,按照750px来走*/
@media screen and (min-width: 750px) {
html{
font-size: 75px!important;
}
}
我用的是HBuilderX,自带px转换rem功能,所以直接使用。其它编辑器能通过插件或者也是自带这个功能。
(5)顶部搜索模块(还是简略的做)
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>
css代码
/*顶部搜索*/
.search-content{
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10rem;
height: 1.173333rem;
background-color: #B49DF8;
}
.search-content .classify {
width: 0.48rem;
height: 0.8rem;
background: url(../images/classify.png) no-repeat;
background-size: 0.48rem 0.8rem;
margin: 0.146666rem 0.333333rem 0.093333rem 0.32rem;
}
.search-content .search {
flex: 1;
text-align: center;
position: relative;
}
.search-content .search .search-icon {
position: absolute;
top: 0.346666rem;
left: 0.6rem;
width: 0.48rem;
height: 0.48rem;
background: url(../images/search-icon.png) no-repeat;
background-size: 0.48rem 0.48rem;
}
.search-content .search input {
width: 6.96rem;
border: 0;
height: 0.853333rem;
border-radius: 0.426666rem;
background-color: #fff;
margin-top: 0.16rem;
outline: none;
font-size: 0.333333rem;
line-height: 0.853333rem;
padding-left: 0.8rem;
color: #757575;
}
.search-content .login {
width: 0.48rem;
height: 0.8rem;
background: url(../images/login.png);
background-size: 0.48rem 0.8rem;
margin: 0.146666rem 0.333333rem 0.093333rem 0.32rem;
}
效果图
(6)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>
css代码
/*banner部分*/
.banner {
text-align: center;
width: 10rem;
height: 8.11rem;
background-color: #B49DF8;
}
.banner .img1 {
width: 9.333333rem;
height: 4.906666rem;
}
.banner .img2 {
width: 10rem;
height: 3.13rem;
}
效果图(还是略丑hhhh)
(7)导航栏模块
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>
css代码
/*导航栏部分*/
.nav {
width: 10rem;
}
.nav a {
float: left;
width: 2rem;
height: 1.893333rem;
text-align: center;
}
.nav a img {
display: block;
width: 1.12rem;
height: 1.12rem;
margin: 0.133333rem auto 0;
}
.nav a .title {
font-size: 0.266666rem;
color: #666;
}
效果图
(8)底部模块
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>
css代码
/*底部部分*/
.foot-content {
position: fixed;
display: flex;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 10rem;
height: 1.333333rem;
background-color: #fff;
text-align: center;
}
.foot-content img {
display: block;
width: 0.64rem;
height: 0.64rem;
margin: 0.16rem auto 0;
}
.foot-content a {
flex: 1;
}
.foot-content div {
color: #000;
font-size: 0.266666rem;
}
.foot-content .guess {
font-weight: bold;
}
同样我们还是给body一个高度,展示出效果
效果图
到这里rem适配布局系列学习笔记已经完结
总结一下:已经能熟练的运用rem布局和flex布局混合实现页面,也能实现不同档位的屏幕整体缩放,技术很方便实用。