移動web適配利器-rem
前言
提到rem，大家首先會想到的是em，px，pt這類的詞語，大多數人眼中這些單位是用於設置字體的大小的，沒錯這的確是用來設置字體大小的，但是對於rem來說它可以用來做移動端的響應式適配哦。
兼容性
先看看兼容性，關於移動端
ios：6.1系統以上都支持
android：2.1系統以上都支持
大部分主流瀏覽器都支持，可以安心的往下看了。
rem設置字體大小
rem是（font size of the root element），官方解釋
，
意思就是根據網頁的根元素來設置字體大小，和em（font size of the element）的區別是，em是根據其父元素的字體大小來設置，而rem是根據網頁的跟元素（html）來設置字體大小的，舉一個簡單的例子，
現在大部分瀏覽器IE9+，Firefox、Chrome、Safari、Opera ，如果我們不修改相關的字體配置，都是默認顯示font-size是16px即
| 1 2 3 | html { font-size:16px; } |
那麽如果我們想給一個P標簽設置12px的字體大小那麽用rem來寫就是
| 1 2 3 | p { font-size: 0.75rem; //12÷16=0.75（rem） } |
基本上使用rem這個單位來設置字體大小基本上是這個套路，好處是假如用戶自己修改了瀏覽器的默認字體大小，那麽使用rem時就可以根據用戶的調整的大小來顯示了。 但是rem不僅可以適用於字體，同樣可以用於width height margin這些樣式的單位。下面來具體說一下
rem進行屏幕適配
在講rem屏幕適配之前，先說一下一般做移動端適配的方法，一般可以分為：
1 簡單一點的頁面，一般高度直接設置成固定值，寬度一般撐滿整個屏幕。
2 稍復雜一些的是利用百分比設置元素的大小來進行適配，或者利用flex等css去設置一些需要定制的寬度。
3 再復雜一些的響應式頁面，需要利用css3的media query屬性來進行適配，大致思路是根據屏幕不同大小，來設置對應的css樣式。
上面的一些方法，其實也可以解決屏幕適配等問題，但是既然出來的rem這個新東西，也一定能兼顧到這些方面，下面具體使用rem：
rem適配
先看一個簡單的例子：
| 1 2 3 4 5 6 7 8 | .con { width: 10rem; height: 10rem; background-color: red; } <div class="con"> </div> |
這是一個div，寬度和高度都用rem來設置了，在瀏覽器裏面是這樣顯示的， 可以看到，在瀏覽器裏面width和height分別是160px，正好是16px * 10,那麽如果將html根元素的默認font-size修改一下呢？
| 1 2 3 4 5 6 7 8 9 10 11 | html { font-size: 17px; } .con { width: 10rem; height: 10rem; background-color: red; } <div class="con"> </div> |
再來看看結果：
這時width和height都是170px，這就說明了將rem應用與width和height時，同樣適用rem的特性，根據根元素的font-size值來改變自身的值，由此我們應該可以聯想到我們可以給html設定不同的值，從而達到我們css樣式中的適配效果。
rem數值計算
如果利用rem來設置css的值，一般要通過一層計算才行，比如如果要設置一個長寬為100px的div，那麽就需要計算出100px對應的rem值是 100 / 16 =6.25rem，這在我們寫css中，其實算比較繁瑣的一步操作了。
對於沒有使用sass的工程：
為了方便起見，可以將html的font-size設置成100px，這樣在寫單位時，直接將數值除以100在加上rem的單位就可以了。
對於使用sass的工程：
前端構建中，完全可以利用scss來解決這個問題，例如我們可以寫一個scss的function px2rem即：
| 1 2 3 4 | @function px2rem($px){ $rem : 37.5px; @return ($px/$rem) + rem; } |
這樣，當我們寫具體數值的時候就可以寫成：
| 1 2 | height: px2rem(90px); width: px2rem(90px);; |
看到這裏，你可能會發現一些不理解的地方，就是上面那個rem:37.5px是怎麽來的，正常情況下不是默認的16px麽，這個其實就是頁面的基準值，和html的font-size有關。
rem基準值計算
關於rem的基準值，也就是上面那個37.5px其實是根據我們所拿到的視覺稿來決定的，主要有以下幾點原因：
1 由於我們所寫出的頁面是要在不同的屏幕大小設備上運行的
2 所以我們在寫樣式的時候必須要先以一個確定的屏幕來作為參考，這個就由我們拿到的視覺稿來定
3 假如我們拿到的視覺稿是以iphone6的屏幕為基準設計的
4 iPhone6的屏幕大小是375px，
| 1 | rem = window.innerWidth / 10 |
這樣計算出來的rem基準值就是37.5（iphone6的視覺稿），這裏為什麽要除以10呢，其實這個值是隨便定義的,因為不想讓html的font-size太大，當然也可以選擇不除，只要在後面動態js計算時保證一樣的值就可以，在這裏列舉一下其他手機的
iphone3gs: 320px / 10 = 32px
iphone4/5: 320px / 10 = 32px
iphone6: 375px / 10 =37.5px
動態設置html的font-size
現在關鍵問題來了，我們該如何通過不同的屏幕去動態設置html的font-size呢，這裏一般分為兩種辦法
1 利用css的media query來設置即
| 1 2 3 | @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ html{font-size: 37.5px;} } |
2 利用javascript來動態設置 根據我們之前算出的基準值，我們可以利用js動態算出當前屏幕所適配的font-size即：
| 1 | document.getElementsByTagName(‘html‘)[0].style.fontSize = window.innerWidth / 10 + ‘px‘; |
然後我們看一下之前那個demo展示的效果
| 1 2 3 4 5 6 7 8 9 10 11 | .con { width: px2rem(200px); height: px2rem(200px); background-color: red; } <div class="con"> </div> document.addEventListener(‘DOMContentLoaded‘, function(e) { document.getElementsByTagName(‘html‘)[0].style.fontSize = window.innerWidth / 10 + ‘px‘; }, false); |
iPhone6下，正常顯示200px
在iphone4下，顯示169px
由此可見我們可以通過設置不同的html基礎值來達到在不同頁面適配的目的，當然在使用js來設置時，需要綁定頁面的resize事件來達到變化時更新html的font-size。
rem適配進階
我們知道，一般我們獲取到的視覺稿大部分是iphone6的，所以我們看到的尺寸一般是雙倍大小的，在使用rem之前，我們一般會自覺的將標註/2，其實這也並無道理，但是當我們配合rem使用時，完全可以按照視覺稿上的尺寸來設置。
1 設計給的稿子雙倍的原因是iphone6這種屏幕屬於高清屏，也即是設備像素比(device pixel ratio)dpr比較大，所以顯示的像素較為清晰。
2 一般手機的dpr是1，iphone4，iphone5這種高清屏是2，iphone6s plus這種高清屏是3，可以通過js的window.devicePixelRatio獲取到當前設備的dpr，所以iphone6給的視覺稿大小是（*2）750×1334了。
3 拿到了dpr之後，我們就可以在viewport meta頭裏，取消讓瀏覽器自動縮放頁面，而自己去設置viewport的content例如（這裏之所以要設置viewport是因為我們要實現border1px的效果，加入我給border設置了1px，在scale的影響下，高清屏中就會顯示成0.5px的效果）
| 1 | meta.setAttribute(‘content‘, ‘initial-scale=‘ + 1/dpr + ‘, maximum-scale=‘ + 1/dpr + ‘, minimum-scale=‘ + 1/dpr + ‘, user-scalable=no‘); |
4 設置完之後配合rem，修改
| 1 2 3 4 | @function px2rem($px){ $rem : 75px; @return ($px/$rem) + rem; } |
雙倍75，這樣就可以完全按照視覺稿上的尺寸來了。不用在/2了，這樣做的好處是：
1 解決了圖片高清問題。
2 解決了border 1px問題（我們設置的1px，在iphone上，由於viewport的scale是0.5，所以就自然縮放成0.5px）
在iphone6下的例子：
我們使用動態設置viewport，在iphone6下，scale會被設置成1/2即0.5，其他手機是1/1即1.
| 1 | meta.setAttribute(‘content‘, ‘initial-scale=‘ + 1/dpr + ‘, maximum-scale=‘ + 1/dpr + ‘, minimum-scale=‘ + 1/dpr + ‘, user-scalable=no‘); |
我們的css代碼，註意這裏設置了1px的邊框
| 1 2 3 4 5 6 | .con { margin-top: 200px; width: 5.3rem; height: 5.3rem; border-top:1px solid #000; } |
在iphone6下的顯示：
在android下的顯示：
rem進行屏幕適配總結
下面這個網址是針對rem來寫的一個簡單的demo頁面，大家可以在不同的手機上看一下效果
但是rem也並不是萬能的，下面也有一些場景是不適於使用rem的
1 當用作圖片或者一些不能縮放的展示時，必須要使用固定的px值，因為縮放可能會導致圖片壓縮變形等。
在列舉幾個使用rem的線上網站：
網易新聞：http://3g.163.com/touch/news/subchannel/all?version=v_standard
聚劃算：https://jhs.m.taobao.com/m/index.htm#!all
參考資料：http://www.nihaoshijie.com.cn/index.php/archives/593
原創文章轉載請註明：
轉載自AlloyTeam：http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/
移動web適配利器-rem