最近有點懷疑人生，畢竟一個人寫前端终蒂，有時候會懷疑自己理解的一些東西包括用法有沒有符合標準。趁著這陣子閑下來遥诉，翻了翻別人的rem適配博客拇泣，發(fā)現(xiàn)有點繞口，怪自己是個強迫癥矮锈，啥都要自己去試試結(jié)果并從中理解霉翔，趁著這段時間有點閑就整理了一下自己的移動端rem適配方案:
1.思路很簡單，首先我們得明白一樣東西苞笨，就是viewport债朵，簡單的說就是我們打開谷歌瀏覽器模擬手機不同型號時看到的不同像素比例大小，i5為320x568,i6為375x667,其它的就不一一列舉了瀑凝，現(xiàn)在假設(shè)我們ui給出的設(shè)計圖大小是750x1334的基準序芦，也就是i6的viewport的兩倍大小。那么我就會通過js來自定義根元素的字體像素大小:如下：
var w = document.documentElement.clientWidth,
fz = w * 20 / 375;
document.getElementsByTagName('html')[0].style.fontSize = fz + 'px';
解釋一下=>clientWidth也就是我們經(jīng)常所說的viewport視口寬度大小猜丹，除以375是因為設(shè)計稿是基于750x1334的基準做出來的芝加，也就是i6設(shè)備device-width的兩倍寬度大小(375px),這個寬度大小可以根據(jù)設(shè)計圖實際大小自定義，假設(shè)設(shè)計圖的寬度大小是640px,那么就要將375px換成640/2=320px大小;
=>而20的意義是用來自定義你要設(shè)置的viewport的device-width為375px下的根字體大小射窒，可隨意更改，因此設(shè)定了上面一段代碼后你會看到谷歌瀏覽器模擬下的設(shè)備為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根目錄字體大小)点寥，于是我們可以通過設(shè)計圖中某一塊元素的標記大小來調(diào)整它對應(yīng)的rem值艾疟，比如設(shè)計圖上(基于750x1334的基準)某一個logo的寬度為100px，那么寫成rem樣式就是100/2(1/20)=2.5rem,為什么要除以2呢，不要忘了設(shè)計圖寬度750px是i6設(shè)備viewport的兩倍寬度大小(375px)蔽莱。當然弟疆，可以通過sass的@mixin()自定義方法設(shè)定一個缺省變量將轉(zhuǎn)化公式100/2(1/20)寫在該方法中，sass會自動幫你完成轉(zhuǎn)換盗冷，寫其它元素樣式時就可以@include該方法啦怠苔！
關(guān)于sass的使用可以看這篇文章
http://www.ruanyifeng.com/blog/2012/06/sass.html
這樣子基本上就實現(xiàn)了rem適配，原理就是在你轉(zhuǎn)換成不同型號手機時1rem的相對大小==html根字體大小仪糖，而html根字體大小是會隨時變動的,1rem相對大小也就會跟著變動.
