利用rem和百分比实现移动端页面自适应

本文背景：响应式布局的实现依靠媒体查询（ 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设置：

参考链接：www.cnblogs.com/lovesong/p/5439756.html