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的时候应该用闭包来包住，使其变量不会成为全局变量，那么上面综合起来：
<script type="text/javascript">
(function(w,d) {
function setSize() {
var screenWidth = d.documentElement.clientWidth;
var currentFontSize = screenWidth * 100 / 750;
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize',setSize);
w.addEventListener('pageShow',setSize)
w.addEventListener('DOMContentLoaded',setSize)
})(window,document)
</script>
现在已经根据不同屏幕大小设置了根元素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)
完整实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
<script type="text/javascript">
(function(w,d) {
function setSize() {
var screenWidth = d.documentElement.clientWidth;
var currentFontSize = screenWidth * 100 / 750;
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize',setSize);
w.addEventListener('pageShow',setSize)
w.addEventListener('DOMContentLoaded',setSize)
})(window,document)
</script>
<style media="screen">
*{
padding: 0;
margin:0;
}
div{
width:7.5rem;
height: 0.32rem;
background: red;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
