Rem
2017-10-12 本文已影响0人
小豌豆书吧
响应式实战笔记--4、Rem
响应式手机网站，一定要能根据手机尺寸的大小比例，去自适应网页，也就是宽、高一起动态改变，宽度可以使用%，高度想自适应，使用rem.
Rem:官方定义就是页面根节点（html）的字体大小。它是一个相对单位，假如html字体大小为20px，那么10rem就等于200px。
em：相对单位（相对父元素的font-size而言）
rem：相对单位（相对根元素html的font-size而言）
注：凡是可以写px的地方，都可以用em或者rem去改写它。
动态设置rem大小：
说白了，就是将html的font-size大小设置的和当前设备下html的宽度一致即可。
document.documentElement.clientWidth; //可以返回当前html的宽度
有了rem这个相对单位之后我们就可以根据当前设备来动态的设置
rem基准值，目前主流做法采用的是当前屏幕的宽度除以10（ 淘宝的做法）
var iFont = document.documentElement.clientWidth/10;
// 将这个数值添加在 html 的身上做为它的字体大小
document.getElementsByTagName('html')[0].style.fontSize = iFont+'px';
rem搭建项目的流程：
（1）观察设计稿的宽度，以当前宽度为基准值；
（2）统一把这个基数缩小10倍；
例：本来效果图640px宽度，1rem=640px；现在缩小10倍，1rem=64px;
则以64px为基数，换算区域的rem高度。
（3）以上两步完成后，要想实现各个不尺寸设备的宽高均自适应，还需要使用JS动态设置根元素的font-size大小。
var oHtml=document.documentElement;
oHtml.style.fontSize=oHtml.clientWidth/10+'px';
案例03rem布局实现宽高自适应.html
图片1.png
4 <!DOCTYPE html>
5 <html lang="en">
6 <head>
7 <meta charset="UTF-8" />
8 <script type="text/javascript">
9 //动态设置视口标签
**
10 var iScale=1/window.devicePixelRatio;
11 document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale='+iScale+', maximum-scale='+iScale+', minimum-scale='+iScale+'" />');
12
13 //动态设置rem基准
14 var oHtml=document.documentElement;
15 //fontSize只认识..px
16 oHtml.style.fontSize=oHtml.clientWidth/10+'px';
17 </script>
18 <title>Document</title>
19 <style type="text/css">
20 *{
21 margin:0; padding:0; border:0; list-style:none;
22 }
23 html{
24 /*把根元素的font-size大小设置成和设计稿一样的宽度*/
25 /*如果真的以当前html宽度为基数，基数太大，会导致换算时出现N多小数点，丢失精度*/
26 /*淘宝的做法是：将基数统一缩小10倍*/
27 /*64px不是一个定值，取决于设计稿的宽度*/
28 font-size: 64px;
29 }
30 header,footer{
31 /*宽度百分比可以自适应*/
32 width: 100%;
33 }
34 header{
35 /*height: 300px;*/
36 /*将固定的px换算成rem的相对单位300/64=4.6875*/
37 height: 4.6875rem;
38 background-color: deepskyblue;
39 }
40 footer{
41 /*height: 150px;*/
42 height: 2.34375rem;
43 background-color: deeppink;
44 }
45 </style>
46 </head>
47 <body>
48 <header></header>
49 <footer></footer>
50 </body>
51 </html>
<br />
