rem详解

rem的定义：相对长度单位。相对于根元素(即html元素)[font-size]计算值的倍数

一、rem的诞生

为什么出现rem？传统的绝对单位px，你设置多少px，网页就给你显示多少px，但是手机的屏幕大小宽度不同。例如一个手机的宽度为375px,此时网页中恰好有个div的的宽度也是375px,那么这div正好占满手机宽度，假如另一个手机的宽度是320px，那么这个div就会超出手机屏幕55px，这样网页会出现横向滚动条。这这种情况显然是我们所不希望看到的，我们想要的是这个div也在这个小手机上恰好占满手机宽度，也就是说手机宽，div就宽，手机窄，div就窄，实现自适应大小。px显然已经不满足这种要求，rem就孕育而生了。

二、rem是如何实现自适应大小的

由定义可以看出：rem(倍数） = width / （html的font-size）=> width = (html的font-size) * rem(倍数)，只要html的font-size的大小变了，width就会自动变，所以rem是通过动态设置html的font-size来改变width的大小，以达到网页自适应大小的目的

三、如何动态设置html的font-size

定义公式：rem(倍数） = width / （html的font-size），根据公式我们可以得出：
rem(倍数） = 设计稿宽度( imgWidth ) / 你设置的font-size( defalutSize )
rem(倍数） = 网页的实际宽度(screenWidth) / 你需要动态设置的font-size( x ) ,那么得出设置html的font-size的公式为：

imgWidth  / defalutSize = screenWidth / x
x = defalutSize * screenWidth / imgWidth

那么我们来定义一个函数来设置不同屏幕大小的html的font-size

function setSize() {
    //获取html元素
    var html = document.documentElement;
    //获取网页宽度
    var screenWidth = html.clientWidth;
    //设置默认的fontSize，可以设置任何大小，为了好计算在这里我设置为100
    var defalutSize = 100;
    //设计图宽度为750
    var imgWidth = 750;
    //计算实际的font-size
    var currentFontSize = defalutSize * screenWidth / imgWidth
    //设置html的font-size
    var html.style.fontSize = currentFontSize + 'px';
}

那么当网页窗口大小发生变化（onresize）或者网页dom元素加载完成(DOMContentLoaded)的这两个事件发生时执行setSize

//监听窗口大小发生变化的事件
window.onresize = function(){
   setSize();
}
window.onDOMContentLoaded = function() {
   setSize();
}

很显然上面的写法不够优雅，而且定义的setSize函数是全局的，大部分开发后面会有很多js，说不定就重名了，这样一来会造成冲突，所以我们写公共的js的时候应该用闭包来包住，使其变量不会成为全局变量，那么上面综合起来：

现在已经根据不同屏幕大小设置了根元素html的font-size,那么如何去用呢？假如设计图是750，那么根据上面的默认font-size,defalutSize = 100,如果设计图上一个长方形是宽度是750px，高度是32px,那么换算成rem应该是：

width: 750 / 100  = 7.5rem;
height：32 / 100  = 0.32rem;
.box{
     width:7.5rem;
     height: 0.32rem;
    background:red;
}

很明显这个长方形等于设计图宽度，那么在网页中也应该占满屏幕，如果红色长方形宽度占满屏幕说明，设置的rem实例成功，可以复制文章最后的代码试试结果！

现在看来把,defalutSize设置为100，大大的方便了计算，当然可以设置为任意非负正整数，因为不论设置多少，倍数rem永远是恒等的，也就是：

设计稿宽度( imgWidth )  /  你设置的font-size( defalutSize ) = 
网页的实际宽度(screenWidth)  /  你需要动态设置的font-size(currentFontSize) 

完整实例：