- 【融职培训】Web前端学习 第2章 网页重构18 rem布局
- 【融职培训】Web前端学习 第2章 网页重构15 flex布局
- 【融职培训】Web前端学习 第2章 网页重构7 浮动布局
- 【融职培训】Web前端学习 第2章 网页重构16 grid布局
- 【融职培训】Web前端学习 第2章 网页重构8 网页结构
- 【融职培训】Web前端学习 第2章 网页重构9 css定位
- 【融职培训】Web前端学习 第2章 网页重构17 媒体查询
- 【融职培训】Web前端学习 第2章 网页重构11 HTML5新增
- 【融职培训】Web前端学习 第2章 网页重构10 还原设计稿
- 【融职培训】Web前端学习 第2章 网页重构12 css3新增样
一、移动端页面布局概述
PC端页面的网页重构，我们使用最多的单位是px。因为在PC端，大部分页面效果我们都可以设置成固定尺寸，但是在手机端，这种方案是不可行的，我们必须要按照百分比呈现页面，才能保证网页在任何设备上可以正常显示。
为了实现这样的功能，我们可以将所有的尺寸都设置成百分比，但是这样会给前端开发带来大量的计算工作。为了实现百分比的效果，又能省去大量的计算工作，我们使用rem布局。
二、rem概述
rem是CSS3中新增的单位，我们现在回顾和对比一下css中的常用的单位：
px
em
rem
px是我们此前最常用的单位，这里不做特殊讲解，我们接下来用两个例子说一下单位em和rem的区别，实例代码如下所示。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7<title>Document</title> 8<style> 9 .box{10/* 修改box的font-size可以影响子元素的em值 */11 font-size: 50px;12}13 .box .test1{14 font-size: 1em;15}16 .box .test2{17 font-size: 0.5em;18}19</style>20</head>21<body>22<div class="box">23<p class="test1">测试文字1</p>24<p class="test2">测试文字2</p>25</div>26</body>27</html>
在上面的代码中，p元素的父级是div元素，我们将p元素的字体设置成1em和0.5em，当div元素的font-size值发生变化的时候，就会影响两个p元素的字体大小，说明em是一个相对单位，它参照的是父级元素的font-size值。
我们在来看rem的例子，实例代码如下所示。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7<title>Document</title> 8<style> 9 html{10/* 修改html的font-size可以影响子元素的em值 */11 font-size: 50px;12}13 .box .test1{14 font-size: 1rem;15}16 .box .test2{17 font-size: 0.5rem;18}19</style>20</head>21<body>22<div class="box">23<p class="test1">测试文字1</p>24<p class="test2">测试文字2</p>25</div>26</body>27</html>
在上面的代码中，我们将两个p元素设置成rem单位，这样我们通过修改html元素的font-size值，就能影响两个p元素的字体大小，这说明rem也是一个相对的单位，它参照的是html元素的font-size值。
三、rem布局
我们已经了解了rem的基本概念，再来看看如何利用rem单位制作出可以适应不同尺寸设备的页面。首先考虑一个问题，rem的参照物是html元素的font-size属性，那么如果html的font-size属性不变的话，我们使用的rem单位仍然是一个固定的单位，所以我们需要做的是让html元素的font-size属性在不同的设备中设置不同的值，这就需要一段js代码了，代码如下所示（fontsizeset.js）
1(function (doc, win) { 2vardocEl = doc.documentElement, 3resizeEvt = 'orientationchange'inwindow ? 'orientationchange' : 'resize', 4recalc =function () { 5varclientWidth = docEl.clientWidth; 6if(!clientWidth)return; 7docEl.style.fontSize = 100 * (clientWidth / 720) + 'px'; 8 }; 9if(!doc.addEventListener)return;10win.addEventListener(resizeEvt, recalc,false);11doc.addEventListener('DOMContentLoaded', recalc,false);12})(document, window);
我们并不需要理解上面的这段代码是如何执行的，只需要知道这段代码可以检测设备的尺寸，并通过设备的尺寸设置html元素的font-size值，这个font-size值会根据设备尺寸的变化而变化，这样我们设置相同的rem值，就会起到百分比的作用了。
我们来看一个实际案例：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7<title>Document</title> 8<!-- 在html中引入fontsizeset.js文件 --> 9<script src="fontsizeset.js"></script>10<style>11 *{12 margin:0px;13 padding:0px;14}15 .box{16 width: 3.6rem;17 height:3.6rem;18 background-color: red;19}20</style>21</head>22<body>23<div class="box">2425</div>26</body>27</html>
在上面的代码中，我们将div的宽和高都设置成了3.6rem，用浏览器打开，发现元素宽度与高度相同，并且宽度始终是窗口宽度的50%。这说明rem布局与百分比布局能实现相同的效果。
四、设计稿量尺
我们再从web开发流程的角度来看，为什么rem布局比百分比布局更加简便，使用rem布局的流程如下所示：
首先，我们拿到设计师的设计稿，通常设计稿的宽度为640px、720px、1080px。
然后再来看看我们的fontsizeset.js文件中的一段代码，第二个数字720就是设计稿的宽度，如果设计稿是1080px，我们需要将fontsizeset.js中的720改成1080。
1docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
最后量尺的时候，如果设计稿中的元素尺寸为x，那么元素的尺寸我们就可以设置成x/100rem（这个100就是上面代码中的第一个数字，具体示例可以看下一节内容）。
我们引入的js文件是720px的设计稿，那么假如设计稿中有一个360px的元素，则该元素广告就是原设计稿的一半，这样我们通过换算可以得到这个元素在网页中的尺寸是3.6rem，所以当我们设置成3.6rem的时候，不管视窗的尺寸如何变化，元素的宽度始终都是整个页面的50%。
通过上述的方法，就可以很容易制作出按百分比排列的页面布局了，这就是rem布局的优势。
课后练习
按照设计稿，完成融职教育手机端的首页。
按照设计稿，完成融职教育手机端的视频详情页面。
网友评论