PC端页面的网页重构,我们使用最多的单位是px。因为在PC端,大部分页面效果我们都可以设置成固定尺寸,但是在手机端,这种方案是不可行的,我们必须要按照百分比呈现页面,才能保证网页在任何设备上可以正常显示。
为了实现这样的功能,我们可以将所有的尺寸都设置成百分比,但是这样会给前端开发带来大量的计算工作。为了实现百分比的效果,又能省去大量的计算工作,我们使用rem布局。
rem是CSS3中新增的单位,我们现在回顾和对比一下css中的常用的单位:
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的参照物是html元素的font-size属性,那么如果html的font-size属性不变的话,我们使用的rem单位仍然是一个固定的单位,所以我们需要做的是让html元素的font-size属性在不同的设备中设置不同的值,这就需要一段js代码了,代码如下所示(fontsizeset.js)
1 (function (doc, win) {
2 var docEl = doc.documentElement,
3 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
4 recalc = function () {
5 var clientWidth = docEl.clientWidth;
6 if (!clientWidth) return;
7 docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
8 };
9 if (!doc.addEventListener) return;
10 win.addEventListener(resizeEvt, recalc, false);
11 doc.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">
24
25 </div>
26 </body>
27 </html>
在上面的代码中,我们将div的宽和高都设置成了3.6rem,用浏览器打开,发现元素宽度与高度相同,并且宽度始终是窗口宽度的50%。这说明rem布局与百分比布局能实现相同的效果。
我们再从web开发流程的角度来看,为什么rem布局比百分比布局更加简便,使用rem布局的流程如下所示:
1 docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
我们引入的js文件是720px的设计稿,那么假如设计稿中有一个360px的元素,则该元素广告就是原设计稿的一半,这样我们通过换算可以得到这个元素在网页中的尺寸是3.6rem,所以当我们设置成3.6rem的时候,不管视窗的尺寸如何变化,元素的宽度始终都是整个页面的50%。
通过上述的方法,就可以很容易制作出按百分比排列的页面布局了,这就是rem布局的优势。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。