rem到是個什么原理？身為一個前段新手饲嗽，我發(fā)現(xiàn)還有很多身邊的朋友不能很刻骨的理解rem到底是個什么貴意思票罐，介于我不想再每次上班的時候溜出去蹲廁所打電話給身邊的朋友解釋這個，我要羅列出來我的思路暮胧，接地氣的思路锐借。
學(xué)習(xí)前端開發(fā)的很多同學(xué)都接觸過淘寶的flexible问麸，很方便的適配，它是將頁面分割成10等分钞翔，然后直接在頁面上引用cdn就可以實現(xiàn)严卖，或者將源碼copy下來放在自己的項目中本地引入，我不詳細的介紹源碼布轿，下面詳細的介紹rem的原理哮笆，看完就自然明白flexible的原理了。
在沒有rem這個單位之前汰扭，我們移動端用px或者em稠肘，em是個相對單位，是根據(jù)當前字體大小來定義的萝毛，根據(jù)W3標準启具，它們是相對于使用em單位的元素的字體大小。這句話怎么理解珊泳？假如一個p標簽，你沒有設(shè)定它的字體大小拷沸，但是因為字體大小這個屬性是會繼承的色查，它繼承了父容器的字體大小，或者是父父父撞芍。秧了。。容器的序无，那么你寫1em就會等于這個被繼承的父容器的字體大小验毡，那也就是說，
<div class="1" style="font-size:20px">
? ? <div class="2" style="font-size:16px">
? ? ? ? <p style="font-size:1em">
????????????就是我了
? ? ? ? </p>
????</div>
</div>
此時的p標簽的字體大小為16px帝嗡；也就是說要這樣
<div class="1" style="font-size:20px;">
????<span class="1-1" style="font-size:0.8em">后來的我</span>
? ? <div class="2" style="font-size:16px;">
? ? ????<p style="font-size:1em;">
? ? ? ? ? ? 就是我了
? ? ? ? </p>
? ? </div>
</div>
這樣子我的span里面的字體才能跟p里面的字體做到一樣大芯ā；看到不同了嗎哟玷？
這就是em后來漸漸被取代的原因狮辽，因為它還是不夠方便，有的時候我們要做的換算還是過多了巢寡，所以前輩們創(chuàng)造了新的單位《rem》喉脖，rem也是在px上升級的，下面我們正式介紹一下rem為什么會更方便抑月，所以被造出來
首先树叽，rem是根據(jù)跟字體的大小來定義的，什么叫跟字體大小谦絮，我們知道代碼里面頁面的根本就是html和body题诵，rem就是被定義為相對于html洁仗，body里面的字體大小來轉(zhuǎn)換的，那為什么它就方便了呢仇轻？因為跟字體的大小不會改變京痢，你定義了是多少就是多少，沒定義的話就是默認大小篷店，不會因為你后面元素的字體大小的重新設(shè)定而改變祭椰，所以，還是上面這個例子疲陕，我類名就是用數(shù)字了方淤，看著個別扭，（用圖片吧蹄殃，這上面寫的有點累）
看携茂，span里面的字體跟p里面的一樣大了（真的一樣大，我沒有把調(diào)試一起截圖下來而已诅岩，你要相信我 >_<）
區(qū)別是什么讳苦，span和p里面的字體大小已經(jīng)不被其他的div的字體大小影響了，只跟隨html吩谦，body的字體大小變化鸳谜。
這就是rem的方便之處，減少了很多換算式廷，將相對的對象統(tǒng)一成一個（——跟字體）咐扭，現(xiàn)在知道rem是個什么東西了吧，那我們來說一下有關(guān)于不同手機屏幕大小的適配問題滑废，以前用px蝗肪，em的時候要去寫@media screen { } ，（媒體查詢）蠕趁。要為每個容器去重新寫一遍單位大小薛闪，這樣是很不方便的，那rem不是不用去寫@media screen { }妻导，而是要寫的就少很多很多了逛绵，我只要去寫跟字體大小的@media screen { }就好了，來看看效果
等比例縮小了倔韭，有木有术浪！文字大小會隨屏幕的大小的變化而變大變小，再也不用單獨寫span的媒體查詢和p的媒體查詢了寿酌，這就是rem機制的方便之處
其實說白了胰苏，就這么個意思，我們用rem單位的時候不是為了省去媒體查詢不寫醇疼，寫還是要寫的硕并，只是再也不用寫一大堆重復(fù)的代碼了法焰，只要管好你的跟字體大小就好了，不同的屏幕去寫不同的跟字體的媒體查詢倔毙，比如說6p埃仪，又要再大一點 的字體，也就是多謝一行代碼的事了陕赃。
（好了卵蛉，再有朋友問我為什么我用了rem換了不同屏幕的手機還是會炸這樣的問題，我不用再溜出辦公室去打電話解釋了么库，我覺得這里我說的已經(jīng)跟接地氣了傻丝，不存在聽不懂的吧hhhhhhh）
另： rem的原理就是這樣，其實可以寫的更優(yōu)雅一點的就是用js來實現(xiàn)這個適配诉儒，相信很多人也在網(wǎng)上看到過這樣的js葡缰，我順帶提一下，這樣的js原理也就是自動去獲取屏幕的寬度忱反，然后根據(jù)不同屏幕的寬度用js去修改跟字體的大小泛释，這樣就可以連媒體查詢也省略了呢，但其實也就是我們手寫的媒體查詢一樣的原理
vw單位用的人較少温算，vw是我寫移動端很喜歡的用的單位（vh一樣）胁澳，vw的原理很好理解，view width米者，可視區(qū)域的寬度，也就是手機的寬度（vh 就是view height宇智，后面只說vw蔓搞，vh一樣理解就可以）；這里vw算的是屏幕的百分比随橘，舉一個例子很直觀的理解
50%跟50vw簡直一摸一樣嘛喂分，是嗎？在這里是一樣的机蔗，還有不一樣的情況蒲祈，再來看這一個效果就了然了
當我把這個叫aa的div容器寬度改為100px時，50%自然就變成了50px萝嘁，像上面一樣
這個叫aa的div容器寬度依然還是100px梆掸，子容器bb的寬度為50vw，結(jié)果牙言，50vw代表的是屏幕的一半酸钦，并不是100px的一半，這樣看起來vw跟%的區(qū)別就好像rem跟em的區(qū)別一樣咱枉，一個是相對于父容器定義大小卑硫，一個是相對于某個指定不變的參照物（rem相對于跟字體徒恋，vw相對于屏幕寬度）而且，vw不用做響應(yīng)式操作欢伏，因為是相對于手機屏幕來寫的寬度入挣，所以你用iphone6看的話它就是ip6的一半寬，用iphone5看的話硝拧，它就是ip5的一半寬径筏，簡直方便的不要不要的
vh跟vw一樣的原理，相對于屏幕的高度河爹，一般移動端的開發(fā)匠璧，寫死高度的地方稍微少一點，其實高度用px也可以咸这，畢竟移動端是可以上下滾動的嘛夷恍，這里說一下，高度也可以用vw的媳维，建議酿雪，移動端開發(fā)的時候，一半普通的小號字體的文字侄刽，直接就用px就好了指黎，沒必要這樣的文字也要根據(jù)屏幕大小變化而變化（有特殊需求除外）
rem跟vw都能實現(xiàn)不同大小的屏幕兼容，具體用哪一個州丹，看你的心情了emmmmmmmmmmm
<小菜鳥心得,有問題請拍磚>
