rem基础
什么是rem
em是父元素继承的字体大小，这样就存在一个问题，在对任何元素进行设置，都需要知道父元素的字体大小，在我们多次使用时会出现无法预知的错误
rem是CSS3的一个相对单位，rem是相对于根元素html字体大小来计算的，即( 1rem = html字体大小 )，这样就意味着我们只需要在根元素设置一个参考值，在根元素中设置多大的字体，这完全根据自己的需要来定。
rem兼容性
目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem
rem目前主要是在移动端页面上使用的比较多，所以 请放心用吧，所有的手机浏览器均支持rem
rem有什么优点？
只要通过JS设置好合适的html字体大小，就可以实现在所有页面均以这个比例去渲染页面，也就是所谓的等比例缩放
只要美工在设计网页的时候不使用特殊的文本字体时，几乎能100%实现页面效果。
使用方法
第一步，在页面head头部声明缩放标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
第二步，在加载页面的时候执行下面这JS
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
｜ 这个段代码的意思是获取页面的宽度 / 效果图宽度 *100，将这个值赋给html=根元素的字体大小
为什么是640?
iphone5的设备像素宽度为640px，CSS逻辑像素为320px，2倍的像素缩放比
大部分手机页面的效果图设计的宽度为640px，也有部分设计师以iphone6的750px为效果图宽度
可以将效果图等比缩放至640px或者将640改为为效果图的宽度
为什么要乘以100？
假设，1rem=20px，需要一个宽度60px，高度40px的元素
那么宽度为3rem，高度为2rem即可，但是当需要一个宽度为55px，高度为37px的宽度时，则需要通过计算器计算比例：宽度2.75rem，高度1.85rem
为什么不一开始就把1rem=1px呢？这样换算起来不是更简单？
浏览器一般都有最小字体限制，比如谷歌浏览器，最小中文字体就是12px，所以实际上没有办法让1rem=1px。
综上所述，写代码的时候在将rem设置为100倍，更方便计算rem数值
设置CSS的时候应该怎么确定值？
当页面宽度与效果图宽度一样的时候，1rem与像素的比例就是1比1
因为最小字体的限制，我们将rem的值乘以100倍，写代码的时候就需要将效果图中的像素除以100即可，如20px，则为0.2rem
rem中的坑
当设置边框宽度为0.01rem时因为缩放的关系导致边框小于1px 无法显示 ,建议直接设置为1px
background-size 设置rem无效，建议使用百分比代替
rem布局缩放雪碧图
在rem布局方案下，使用contain或cover来缩放背景图片就无法奏效了。因为元素的背景其实是sprite图片的局部，contain和cover只能对整张图片进行缩放，没办法控制到局部的大小。
比如雪碧图大小为200*50px
则 background-size: 2rem 0.5rem;
页面滚动问题
在移动端 如果不对元素做限制，则会出现整个页面随着手势横向滚动的情况
可以使用 touch-action: pan-y; 只允许上下滚动，不允许左右滚动。