本文背景：响应式布局的实现依靠媒体查询（ Media Queries ）来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配。
专题导入：我们可以通过rem单位来进行适配，然后内嵌一段js脚本去动态计算根元素大小。
px：绝对单位像素
rem：相对于“根元素的字体大小”的单位
一、解释网页设计中经常看到的 body{ font-size:62.5%}
由于绝大多数浏览器中的默认font-size：16px; 进而默认情况下1rem = 16px。那1.2rem = ?(......经过几十秒的心算，罢了，我还是拿起计算器吧。)最后算出来1.2rem = 19.2px。
经过上面的过程，心想，如果默认情况下1rem = 10px,那1.2rem = 12px(再也不用拿起计算器了，哦也)。而font-size:62.5%的由来就是10/16的值，这句css的目的就是把浏览器默认的根元素字体大小置为10px，方便rem和px的转换。
由上可知：我们可以在自己的css代码中，为html{font-size:10px} body{font-size:100%},这样在做页面自适应时，rem的计算转换就简单多了。
二、js动态设置rem来实现移动端的自适应
原理：利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用
代码截屏：
注：对于iphone6而言，屏幕尺寸为750px，一般设计人员的设计稿也大都是以iphone6的屏幕尺寸设计，iphone6为基准做设备适配。
三、移动开发设计稿转换成页面尺寸的问题
（1）设计稿的单位是px，一般是750px
（2）页面若使用rem为单位，一般把转换设置为1rem = 10px（参考本文第一（“解释网页设计中经常看到的 body{ font-size:62.5%}”）部分）。
（3）750px的设计图一375px量宽（即，设计稿是750px，转换成页面实际尺寸就是375px，页面尺寸是设计稿尺寸的二分之一）。例：若设计稿里面元素的宽度是100px，则页面尺寸就是 100/2/10 = 5rem
四、移动开发注意点
（1）一定要加上的meta设置：
<meta name = "viewport" conent = "width = device-width; initial-scale = 1.0; minimum-scale = 1.0; maximum-scale = 1.0; user-scalable = no">
