谈谈个人移动端rem适配方案

最近有点怀疑人生，毕竟一我的写前端，有时候会怀疑本身理解的一些东西包括用法有没有符合标准。趁着这阵子闲下来，翻了翻别人的rem适配博客，发现有点绕口，怪本身是个强迫症，啥都要本身去试试结果并从中理解，趁着这段时间有点闲就整理了一下本身的移动端rem适配方案:

　　1.思路很简单，首先咱们得明白同样东西，就是viewport，简单的说就是咱们打开谷歌浏览器模拟手机不一样型号时看到的不一样像素比例大小，i5为320x568,i6为375x667,其它的就不一一列举了，如今假设咱们ui给出的设计图大小是750x1334的基准，也就是i6的viewport的两倍大小。那么我就会经过js来自定义根元素的字体像素大小:以下：

　　　　var w = document.documentElement.clientWidth,
　　　　　  fz = w * 20 / 375;
　　　　document.getElementsByTagName('html')[0].style.fontSize = fz + 'px';

　　解释一下=>clientWidth也就是咱们常常所说的viewport视口宽度大小，除以375是由于设计稿是基于750x1334的基准作出来的，也就是i6设备device-width的两倍宽度大小(375px),这个宽度大小能够根据设计图实际大小自定义，假设设计图的宽度大小是640px,那么就要将375px换成640/2=320px大小;

　　　　　　=>而20的意义是用来自定义你要设置的viewport的device-width为375px下的根字体大小，可随意更改，所以设定了上面一段代码后你会看到谷歌浏览器模拟下的设备为i6(375pxX667px)的html元素上多了style="font-size:20px"这个样式，也就是咱们本身定义的根字体的像素大小，固然不能少了window.onresize事件让视口被改变时自动算出并跟新html根字体大小，因此完整的代码是这样的:　　　　　

　　　　Window.onload=window.onresize=function () {
　　　　　　　　　　　　var w = document.documentElement.clientWidth,
　　　　　　　　　　　　fz = w * 20 / 375;
　　　　　　　　　　　　document.getElementsByTagName('html')[0].style.fontSize = fz + 'px';
　　　　　　　　　　　　},

　　那么此时1rem就至关于20px=>(html根目录字体大小)，因而咱们能够经过设计图中某一块元素的标记大小来调整它对应的rem值，好比设计图上(基于750x1334的基准)某一个logo的宽度为100px，那么写成rem样式就是100/2*(1/20)=2.5rem,为何要除以2呢，不要忘了设计图宽度750px是i6设备viewport的两倍宽度大小(375px)。固然，能够经过sass的@mixin()自定义方法设定一个缺省变量将转化公式100/2*(1/20)写在该方法中，sass会自动帮你完成转换，写其它元素样式时就能够@include该方法啦，关于sass的使用能够看这篇文章=>http://www.ruanyifeng.com/blog/2012/06/sass.html

　　这样子基本上就实现了rem适配，原理就是在你转换成不一样型号手机时1rem的相对大小==html根字体大小，而html根字体大小是会随时变更的,1rem相对大小也就会跟着变更.