一 什么是rem？

“font size of the root element 這是w3c的定義

也就是說是相對(duì)于根節(jié)點(diǎn)（html節(jié)點(diǎn)）的字體大小的單位。

目前主流的瀏覽器基本都支持rem這個(gè)單位，大部份的默認(rèn)字體單位是16px。

圖片摘自 http://caniuse.mojijs.com/Home/Html/item/key/rem/index.html

 二 簡單應(yīng)用。

既然確定在各個(gè)主流瀏覽器都能食用的話，我們就放心大膽在移動(dòng)端進(jìn)行開發(fā)了。

舉個(gè)例子說明

-size:62.5%; --size:1

由于我們選定的瀏覽器默認(rèn)字體為16px，將根節(jié)點(diǎn)html設(shè)置為 font-size:62.5%;，這樣換算下來的話 1rem = 10px ，在單位的計(jì)算方便將會(huì)方便很多。

三 響應(yīng)式使用。

在實(shí)際開發(fā)過程中，不論是移動(dòng)端還是pc端都要兼容各種分辨率的設(shè)備，所以實(shí)際尺寸是要響應(yīng)式的。

假如說上個(gè)例子的62.5%是基于iPhone5的尺寸，也就是說是320*568的尺寸

如果是ipad尺寸的時(shí)候，只要相應(yīng)的擴(kuò)大倍數(shù)即可

@media only screen and (min-width: 768px){
    html {
        font-size: 150%!important;
    }
}

注：利用媒體查詢，可根據(jù)自己的實(shí)際需要，設(shè)定不同的尺寸。

四 rem的進(jìn)階使用

先甩上地址 ht  tps://g  ithub.  com/am fe/lib-flexible

說起移動(dòng)端適配，怎么能少 了淘寶的移動(dòng)端~

這個(gè)教程足夠詳細(xì)了（如果絕對(duì)還不夠的話，可以參考下這個(gè)地址  h  ttp  s://gi  thu  b.com/am  fe/article/issues/17 ，其中還有現(xiàn)成的demo）。

在引入flexible.js過后，關(guān)于px轉(zhuǎn)成rem的方法：

在sublime中是有直接轉(zhuǎn)換的插件，有興趣的童鞋可以去研究下。

在sass/less預(yù)編譯下也可快速計(jì)算當(dāng)前尺寸。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。