淺談移動端rem的用法

一 什麼是rem？

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

也就是說是相對於根節點（html節點）的字體大小的單位。

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

圖片摘自 htt p://ca  nius e.m o jijs .co m /Hom  e/H tml/item/  key/rem/  index.html

 二 簡單應用。

既然肯定在各個主流瀏覽器都能食用的話，咱們就放心大膽在移動端進行開發了。

舉個例子說明

-size:62.5%; --size:1

因爲咱們選定的瀏覽器默認字體爲16px，將根節點html設置爲 font-size:62.5%;，這樣換算下來的話 1rem = 10px ，在單位的計算方便將會方便不少。

三 響應式使用。

在實際開發過程當中，不管是移動端仍是pc端都要兼容各類分辨率的設備，因此實際尺寸是要響應式的。

假如說上個例子的62.5%是基於iPhone5的尺寸，也就是說是320*568的尺寸

若是是ipad尺寸的時候，只要相應的擴大倍數便可

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

注：利用媒體查詢，可根據本身的實際須要，設定不一樣的尺寸。

四 rem的進階使用

先甩上地址 ht tps://githu  b.c   om/a   m  fe/lib- flexible

提及移動端適配，怎麼能少了淘寶的移動端~

這個教程足夠詳細了（若是絕對還不夠的話，能夠參考下這個地址    htt   ps:/   /gith ub.com/a    mfe/ artic   le/is  sues/17 ，其中還有現成的demo）。 

在引入flexible.js事後，關於px轉成rem的方法：

在sublime中是有直接轉換的插件，有興趣的童鞋能夠去研究下。

在sass/less預編譯下也可快速計算當前尺寸。