響應式布局之rem

rem這是個低調的css機關，近一兩年開始嶄露頭角，許多使用者對rem的評價不一，有的在嘗試使用，有的在使用過程中遇到坑就棄用了。但是在進行app開發或者叫做響應式布局的時候，它還是一個強力的候選手段之一。

什麼是rem？

rem（font size of the root element）是指相對于根元素（html）的字型大小的相對機關。看到rem一定就會想到em這個機關，em（font size of the element）是指相對于父元素的字型大小的機關。它們之間其實很相似，隻不過一個計算的規則是依賴根元素一個是依賴父元素計算。

為什麼使用rem進行布局？

rem适用于web app中，如果是文本 page布局使用rem多多少少會有些相容問題要處理，但是想想，web app在那個終端是沒有的，答案是顯而易見的，每個人的終端裝置上都有app在使用和運作。

那下面我們就看看，如何在項目中使用rem。

适配不同螢幕進行布局

就拿iphone來說，一個系列6，就有兩種大小，導緻的移動端的螢幕種類更加的混亂，而rem根據不同的螢幕設定不同的根元素字型大小，來分别控制每一個結構的樣式。 

浏覽器的相容性

rem是CSS3新的一個度量機關，那麼有哪些浏覽器在支援呢，其實還蠻多的，例如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。看看是不是咱們的老朋友IE6-8不支援呀，沒關系，rem一般用在終端裝置上，是以IE6-8我們其實是可以不考慮的。

那麼在進行rem布局前，我們需要先動态擷取每一個移動裝置的寬度和我們的字型大小進行換算，設定出一個統一的值，這需要JS的配合。

一般在做rem布局的時候，有可能會配合媒體查詢來進行密集斷點的設定。這樣操作的話，可以省略JS動态擷取，但是咱們還是推薦動态擷取這種方法，簡化操作并且精簡代碼，例如每一個分辨率都設定一個根元素的字型大小。

下面我們舉個栗子說一下： 

設計稿如果是640px的寬度，那麼我們設定根元素字型大小為100px，那麼整個頁面的寬度就是多少呢，每錯就是6.4rem，那麼簡單了，如果頁面上的一個子產品的大小為20px*20px，那麼這個子產品的寬高怎樣設定呢？

看rem布局其實就是這樣簡單，隻需要進行簡單的換算就可以達到我們想要的效果。 

那麼rem也有一些缺點，例如對于文字的描述，可能會出現不協調的現象，子產品和子產品的距離會和設計稿的效果有所偏差，如果對還原度要求高的網站，可能就玩轉不起來了。