淺談移動(dòng)端rem的用法

一 什么是rem？

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

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

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

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

 二 簡(jiǎn)單應(yīng)用。

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

舉個(gè)例子說(shuō)明

-size:62.5%; --size:1

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

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

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

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

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

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

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

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

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

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

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

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

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

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