最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准。趁着这阵子闲下来,翻了翻别人的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根字体大小,所以完整的代码是这样的:
var w = document.documentElement.clientWidth,
fz = w * 20 / 375;
document.getElementsByTagName('html')[0].style.fontSize = fz + 'px';
},