rem原理与简介

rem是css3一种新的长度单位。在W3C中有这样的定义：REM（Font size of the root element）是指相对于html根元素的字体大小的单位（注意这里泛指是相对于html中的根元素标签也就是html）。一般用于在移动端中解决多种机型适配问题。

在移动端开发时候，开发人员为了解决不同的机型适配问题。常用mediaQue(媒体查询)依据每种机型写多套适配代码。这种方法固然能解决适配问题。代码量太多了，不美观，且不利于维护。

用rem可以解决上述的问题。rem的核心在于通过动态设置根元素html的font-size。我们知道浏览器的默认的font-size是16px,(有些浏览器例外)。依据W3C中的描述相对于html中的根元素标签。也就是1rem = 16px,  16px = 1rem。

代码如下:

1.首先先获取设备屏幕的宽度,以下采用兼容的写法

     let htmlWidth= document.documentElement.clientWidth || document.body.clientWidth

     console.log(htmlWidth)

2.通过标签选择器获取根元素html标签

     let htmlDom = document.getElementsByTagName('html')[0]

3.用设备的宽度除10,然后把得到的数值赋值给根元素的font-size;

这里的除数选择多少都可以,不一定是要10,这里除10的目的在于:假设设备是iphone6,那宽度就是375,最后得到根元素的font-size就是37.5px,如果除数越大的话，那最后得到的像素就越小也就是font-size越小，而对于浏览器来说，它无法识别那么小的font-size。所以这里的除数，应该选择一个合适的数值。

     htmlDom.style.fontSize = htmlWidth / 10 + 'px';

4.得到的htmlDom(根元素)是37.5px 也就是1rem ，接下来就好办多了,当你编码的时候，你就可以依据设计稿中标注的尺寸(px) 例如:你设置某个元素的高度,假设是120px (移动端中设计稿标注的尺寸一般都是乘以2倍)，所以这里要除2,也就是60px，然后用

60px / 根元素的font-size 37.5px  =  ?rem (这里的问号即是除完后的数值,单位是rem)

5.如果每次都要手动去除根元素的font-size很麻烦，这里可以运用sass,less定义一个方法来工作。代码如下

@function px2rem($px){

  $rem : 37.5px;  定义一个变量初始值为37.5。也就是我们之前根据设备宽度375 px  / 10 px 得到的根元素的font-size

     @return ($px / $rem ) + rem;  接下来每次调用这个方法传入的px 自动除 37.5 最后返回给调  用者

  }

例如:

.fatherBox {

width: px2rem(160px); 函数执行完之后会自动以rem来作为单位返回

height: px2rem(160px);

}