rem自适应移动端布局

rem自适应布局得牛逼之处就是，在一个移动端分辨率上布局好了以后，能够适应所有移动端布局。一开始我觉得这个东西很难搞，我们以视觉稿为640px的宽来举例子，把640px分为100份，每一份称为一个单位a，那么每个a就是6.4px，而1rem单位被认定为10a，此时，1rem=1(a)X10X6.4(px)即64px。

640px/100=6.4px                              1个单位a为6.4px
1rem = 10a                                   1rem单位被认定为10a
1rem = 1(a)*10*6.4(px) = 64px

因此，对于视觉稿上的元素的尺寸换算，只需要原始px值除以rem基准px值(此例子中为64px)即可。
例如240px * 120px的元素，最后转换为3.75rem * 1.875rem。

我觉得上面这个做法很麻烦，虽然编辑器有rem自动转换的插件，但是感觉还是不好，然后我就在想，如果rem和px的转换是一个直观的十倍这么转，那么就方便多了，1rem=10px。

提出这个想法以后，我就去找资料了，结果网上资料让人乱花渐欲迷人眼。于是只能救助技术群大佬了，最终是解决了，引入了一段js，大佬说是网易的一个项目里面的，我现在张贴一下。

!function(){
    function t(t,e,n){
        var i,r,o=document.querySelector('meta[name="viewport"]'),a=document.documentElement.clientWidth;
        switch(t){
            case"fixed":i=e,r=a/e;break;
            case"rem":var s=window.devicePixelRatio||1;i=a*s,r=1/s,document.documentElement.style.fontSize=100*(a*s/e)+"px"}o.setAttribute("content","width="+i+",initial-scale="+r+",maximum-scale="+r+",minimum-scale="+r),n&&window.addEventListener("DOMContentLoaded",function(){document.body.style.fontSize=50/r+"px"})}t("fixed",375)}();

ok，上面那个小括号里面有个375px，这是我自己再375px屏幕里面布局的，这个主要是根据设计图纸上移动端布局的宽度来，可自动更改。

引入上述代码了以后还是没用，这时候还得设计html的font-size为62.5%。

html{
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 62.5%;
}

然后你就可以再你的页面布局了，可以直接px，可以自适应所有移动端，因为上面那个js的作用就是这样，我当时不知道，我直接用的rem，效果是一样的，1rem=10px。比如你要设置你的margin，你想设置为10px，那么你可以使用10px，如果你想使用rem，那么就是1rem了。