談談我的移動端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相對大小也就會跟着變動.