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