1.rem和em的区别
rem是根据html根节点来计算的，em是相对于父元素的，但是字体相关样式会被子元素继承，如果该节点的父元素继承了他的父元素的样式，这样情况就比较复杂了。
如果根节点的字体大小是16px（默认是16px），一个子元素<div class="son">的width为1.2em，那么他会继承根节点的16px，实际的width就是16*1.2px， 如果我们多加一个<div class="father">包裹原来的div，然后设置其字体大小也为1.2em， 这里由于.father继承了根节点的16px，那么.father的字体大小就为（1.2*16px），而.son的父节点又变成了.father，.son就会继承.father的字体大小(1.2*16px)，所以他的width就为(1.2*(1.2*16))px
而rem是直接相对于根节点的，不会出现这种因为继承而出现的bug。
2.通过rem实现响应式布局
rem单位是通过html的font-size的大小决定的，所以html的font-size相当于是一个基准，当页面的size发生变化的时候，只需要动态的改变fong-size的大小，那么用rem的元素的对应属性也会动态的变化
window.onresize = () => { //当窗口大小发生变化的时候执行下面函数
setW()
}
//该函数是进行单位换算的，计算1rem对应多少px
function setW() {
var screenw = window.innerWidth; //获取敞口大小
var danwei = screenw / 10; //等分，这里的单位实际上就上换算过的1rem对应多少px
var html = document.querySelector('html')
html.style.fontSize = danwei + 'px' // 然后将这个像素赋值给根节点的font-size
}
setW()
// 上述代码中将视图容器分为10份，font-size用十分之一的宽度来表示，最后在header标签中执行这段代码，就可以动态定义font-size的大小，从而1rem在不同的视觉容器中表示不同的大小，用rem固定单位可以实现不同容器内布局的自适应。
