最近有点怀疑人生，毕竟一个人写前端，有时候会怀疑自己理解的一些东西包括用法有没有符合标准。趁着这阵子闲下来，翻了翻别人的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相对大小也就会跟着变动.
网友评论