一、前導 在CSS3新定義的rem之前，可能大家都會想到之前CSS中的設定頁面字型大小的單位：px、em、pt等。 但在相比之下，CSS3新定義的rem更加適合用來做移動端的響應式。 在相容性方面：在移動端方面的      iOS：6.1系統以上的都支援      android:  2.1系統以上的都支援 大部分主流的瀏覽器都支援 rem與em的區別：      rem在官網的解釋為：(font size of the root element)      em在官網的解釋為：(font size of the element) 就是根據網頁的根元素來設定字型的大小。而不同的是：em是根據其父元素的字型大小來設定；rem則是根據網頁的根元素（html）來設定大小。 在大部分的主流瀏覽器IE9+、Firefox、Chrome、Safari、Opera中，如果我們不修改字型配置，則font-size預設為16px，也就是 html{
    font-size: 16px;
}
那我們想要用rem來給div的字型大小設定為14px，我們需要這樣寫 div{
    font-size: 0.875rem;/* 14 / 16 = 0.875 */
}
二、rem螢幕適配 在用rem進行螢幕適配之前，回想一下我們之前進行適配的一些方法： 1、比較簡單的情況下，高度一般設定為定高，然後寬度鋪滿整個螢幕。 2、相對複雜的情況下，可以利用百分比進行適配，或是實用flex彈性佈局等css設定某些定製的寬度。 3、最後，針對再複雜的響應式，可以根據css3的media query屬性進行適配；就是說根據不同的裝置的大小來設定相應的css樣式。 以上的這些個方法都可以做到響應式，那既然出現rem這個新東西；那麼也能夠做到響應式這方面。 既然rem是根據html元素來改變的值的大小；所以我們可以根據需要設定html的大小來實現我們css樣式中的適配效果。 rem數值計算 使用rem來設定css值，一般都會經過一層的計算才會得到數值，例如：在沒有設定過html大小（font-size）；想要把一個div的width設定為100px，所以需要計算出100px對應的rem值；100/16=6.25rem。如果這樣設定我們寫css的時候就非常的繁瑣。 對於寫css樣式，我們可以使用sass來寫，也可以不用直接寫 在沒有使用sass的時候；為了方便一點，可以講html的font-size設定為100px；這樣我們在轉化rem的時候；直接除以100再加上rem單位就可以了。 如果我們使用了sass：就可以利用sass來解決這個問題，可以利用函式來解決，定義一個預設變數；然後通過函式來轉化為rem $baseSize

: 75px !default;

html,body{
  margin:0;
}

@function pxToRem($px){
  @return $px / $baseSize * 1rem;
}

.mobile{
  width: pxToRem(375px);
  height: 200px;
  background: #00B7FF;
}
說到這；關於rem需要有一個其準值；就是設定別的有單位的大小，都是參考這個其準值來設定的；預設的其準值就是16px 和html的font-size有關。 我們寫的樣式由於需要相容不同的螢幕裝置；所以我們需要選取一個確定的螢幕裝置作為參考；其他的裝置都是在其的基礎上變化。 比如我們選取iphone6來作為參考其準設計；iphone6的解析度為375x667 所以我們可以設定rem的其準值為 var w = window.innerWidth;
document.documentElement.style.fontSize = w/10 + 'px';
即 1rem ＝ 37.5px 通過上面的js程式碼，可以動態的改變其準值； 這樣我們可以通過上面的sass檔案；改變 @function pxToRem($px){        @return $px / $baseSize * 1rem; } 函式傳入的值就可以設定我們想要設定的寬度大小 rem進階用法 進階前，需要了解幾個概念： 1、視窗 viewport 可以這麼說，viewport指的是瀏覽器的視窗，在pc端瀏覽器中，就是等於視窗的寬高； 但是在移動端的有點不一樣，因為其viewport過小；所以提供了兩個viewport：虛擬的viewportvisualviewport和佈局的viewportlayoutviewport。 2、物理畫素(physical pixel) 物理畫素又被稱為裝置畫素，就是在裝置中顯示的最小物理部件；就是這些微小的裝置畫素阻礙了我們肉眼看影象的效果。 3、裝置獨立畫素(density-independent pixel) 裝置獨立畫素又被叫為密度無關畫素，就是可以這樣認為是計算機座標系統的一個點，這一個點可以經過程式使用虛擬畫素（比如CSS畫素），經過系統轉化為 物理畫素。 4、CSS畫素 稱為一個抽象的單位，用來精確度量Web頁面上的內容，又被稱為虛擬畫素。 5、螢幕密度 螢幕密度是指一個裝置表面上存在的畫素數量，通常以每英寸有多少畫素來計算(PPI)。 6、裝置畫素比(device pixel ratio) 簡稱dpr，就是     裝置畫素比 ＝ 物理畫素 ／ 裝置獨立畫素 裝置獨立畫素與螢幕密度有關。dip可以用來輔助區分視網膜裝置（Retina）還是非視網膜裝置 在不同的螢幕上，CSS畫素所呈現的物理尺寸是一致的，而不同的是CSS畫素所對應的物理畫素具數是不一致的。在普通螢幕下1個CSS畫素對應1個物理畫素，而在Retina螢幕下，1個CSS畫素對應的卻是4個物理畫素 通常我們拿到的設計稿一般為 iphone6的，尺寸為兩倍大小 一般的手機的dpr是1，像iphone4、iphone5、iphone6是2、iphone6s plus這種高清屏是3；可以通過js來獲取window.devicePixelRatio當前的裝置畫素比； 獲取dpr之後，可以通過建立meta標籤自己設定viewport中的內容； var w = window.innerWidth;
document.documentElement.style.fontSize = w/10 + 'px';

var dpr = window.devicePixelRatio;
var metaE = document.createElement('meta');
metaE.setAttribute('name', 'viewport');
metaE.setAttribute('content','initial-scale=' + 1/dpr + ',maximum-scale=' + 1/dpr + ',minimum-scale=' + 1/dpr + ',user-scalable=no');
document.documentElement.firstElementChild.appendChild(metaE);
參考網址：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html   http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/