響應式十日談第一日：使用 rem 設置文字大小

原文地址：http://ued.taobao.com/blog/2013/05/rem-font-size/

上面回顧：

在序言中咱們已經提到了響應式的一些基本理念，好比：

響應式網頁不只僅是響應不一樣類型的設備，並且須要響應不一樣的用戶需求。響應式的初衷是爲了讓信息更好的傳遞交流，讓全部人無障礙的獲取信息，同時這也是 Web 的初衷。

序言中一樣提到，響應式的設計應該秉承「內容優先，移動優先」的設計原則，那麼咱們知道網頁中的內容主要是由文字圖片等元素組成的，那麼文字該如何響應式呢？

當咱們天天面對繽紛的互聯網世界的時候，文字不只僅傳遞給咱們衆多的信息資訊，並且在設計師的手裏，文字在網頁中的排版承載着一種藝術的直覺。

網頁中經常使用的文字大小單位是 px(Pixels)，em，如今《CSS Values and Units Module Level 3》中新增了 rem 這個單位。

1、那到底什麼是 rem 呢？

規範中明確寫道：

Equal to the computed value of ‘font-size’ on the root element.

「rem」是指根元素（root element，html）的字體大小，好開心的是，從遙遠的 IE6 到版本帝 Chrome 他們都約好了，根元素默認的 font-size 都是 16px。這樣一個新的單位兼容性如何呢？請出 Caniuse 看看吧：

 

太好了，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我能夠放肆的使用 rem 了。

但是，W3C 那些傢伙爲何要閒着下面疼的新增這樣一個單位呢？它和 em 有啥區別呢？

咱們知道 em 的計算是基於父級元素的，在實際使用中給咱們的計算帶來了很大的不便。因此 rem 的出現解救了我這樣不會算術的人，不再用擔憂父級元素的 font-size 了，由於它始終是基於根元素（html） 的。

好比默認的 html font-size=16px，那麼我想設置12px 的文字就是：12÷16=0.75（rem）

固然，你能夠引入 CSS 預處理工具（Sass、LESS 、Stylus等）自動計算 rem 值，這裏就不一一舉例了。

可是像我這樣的懶人或者團隊開發中尚未引入 CSS 預處理工具的該腫麼辦呢？只能搬個計算器啪啪啪了嗎？別急，你還能夠變通一下。咱們改變一下 html 的默認 font-size=10px 不就好計算了嘛！Like this：

html{

font-size:62.5%; /* 10÷16=62.5% */

}

body{

font-size:12px;

font-size:1.2rem ; /* 12÷10=1.2 */

}

p{

font-size:14px;

font-size:1.4rem;

}

須要注意的是，爲了兼容不支持 rem 的瀏覽器，咱們須要在 rem 前面寫上對應的 px 值，這樣不支持的瀏覽器能夠優雅降級。其實不用太糾結是默認的 font-size:100%，仍是設置爲 font-size:62.5%，若是你引入了 CSS 預處理工具那麼天然可使用默認值，若是因爲其餘緣由使用 font-size:62.5% 也無可厚非，徹底能夠在 body 中重置回你須要的默認 font-size。

2、爲啥要用 rem 呢？

黑夜給了我黑色的眼睛，我將用它尋找關懷。

瀏覽器中用戶都是能夠自定義默認的文字大小的，若是使用 px，用戶自行在瀏覽器設置中改變了文字大小後，網頁上是不會變化的。咱們不能排除視障用戶（如近視）、老年用戶不會這麼作，做爲一個具備「人文關懷」的前端，咱們徹底能夠考慮這些狀況。由其是在引入了 CSS預處理工具以後，這幾乎不會增長什麼成本。

也再次印證前面提到的：響應式網頁不只僅是響應不一樣類型的設備，並且須要響應不一樣的用戶需求。

各個瀏覽器的設置方法以下：

1.  IE瀏覽器：按下 Alt 鍵，打開菜單欄→查看→字體大小

2.Chrome 瀏覽器：設置→顯示高級設置→網頁內容

3.Firefox 瀏覽器：按下 Alt 鍵，打開菜單欄→工具→選項→內容選項卡

 4.其餘瀏覽器就不一一舉例了……

3、何時用 rem？

既然 rem 的可用性更好，是否是在全部地方都去使用呢？別捉急，一般在標題，正文等大面積文字的位置可使用 rem。可是在一些特殊的設計場景，rem 可能會致使佈局錯位，好比這樣一個回頂部的按鈕：

 

因此，何時用 rem，如何用好 rem？ 這也須要你拿出 18K的黑色烏金睛來照亮整個頁面。讓咱們一塊兒：

拋開佈局，響應文字；拋開成見，響應心裏。

在面對響應式開發的時候，什麼纔是合適的，什麼是不合適的，你真的想好了嗎？