響應(yīng)式十日談第一日：使用 rem 設(shè)置文字大小

響應(yīng)式網(wǎng)頁(yè)不僅僅是響應(yīng)不同類(lèi)型的設(shè)備，而且需要響應(yīng)不同的用戶(hù)需求。響應(yīng)式的初衷是為了讓信息更好的傳遞交流，讓所有人無(wú)障礙的獲取信息，同時(shí)這也是 Web 的初衷。

序言中同樣提到，響應(yīng)式的設(shè)計(jì)應(yīng)該秉承「內(nèi)容優(yōu)先，移動(dòng)優(yōu)先」的設(shè)計(jì)原則，那么我們知道網(wǎng)頁(yè)中的內(nèi)容主要是由文字圖片等元素組成的，那么文字該如何響應(yīng)式呢？

當(dāng)我們每天面對(duì)繽紛的互聯(lián)網(wǎng)世界的時(shí)候，文字不僅僅傳遞給我們眾多的信息資訊，而且在設(shè)計(jì)師的手里，文字在網(wǎng)頁(yè)中的排版承載著一種藝術(shù)的直覺(jué)。

網(wǎng)頁(yè)中常用的文字大小單位是 px(Pixels)，em，現(xiàn)在《CSS Values and Units Module Level 3》中新增了 rem 這個(gè)單位。

一、那到底什么是 rem 呢？

規(guī)范中明確寫(xiě)道：

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

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

太好了，IE9+，F(xiàn)irefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。

可是，W3C 那些家伙為什么要閑著下面疼的新增這樣一個(gè)單位呢？它和 em 有啥區(qū)別呢？

我們知道 em 的計(jì)算是基于父級(jí)元素的，在實(shí)際使用中給我們的計(jì)算帶來(lái)了很大的不便。所以 rem 的出現(xiàn)解救了我這樣不會(huì)算術(shù)的人，再也不用擔(dān)心父級(jí)元素的 font-size 了，因?yàn)樗冀K是基于根元素（html） 的。

比如默認(rèn)的 html font-size=16px，那么我想設(shè)置12px 的文字就是：12÷16=0.75（rem）

當(dāng)然，你可以引入 CSS 預(yù)處理工具（Sass、LESS 、Stylus等）自動(dòng)計(jì)算 rem 值，這里就不一一舉例了。

但是像我這樣的懶人或者團(tuán)隊(duì)開(kāi)發(fā)中還沒(méi)有引入 CSS 預(yù)處理工具的該腫么辦呢？只能搬個(gè)計(jì)算器啪啪啪了嗎？別急，你還可以變通一下。我們改變一下 html 的默認(rèn) font-size=10px 不就好計(jì)算了嘛！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 前面寫(xiě)上對(duì)應(yīng)的 px 值，這樣不支持的瀏覽器可以?xún)?yōu)雅降級(jí)。其實(shí)不用太糾結(jié)是默認(rèn)的 font-size:100%，還是設(shè)置為 font-size:62.5%，如果你引入了 CSS 預(yù)處理工具那么自然可以使用默認(rèn)值，如果由于其他原因使用 font-size:62.5% 也無(wú)可厚非，完全可以在 body 中重置回你需要的默認(rèn) font-size。

二、為啥要用 rem 呢？

黑夜給了我黑色的眼睛，我將用它尋找關(guān)懷。

瀏覽器中用戶(hù)都是可以自定義默認(rèn)的文字大小的，如果使用 px，用戶(hù)自行在瀏覽器設(shè)置中改變了文字大小后，網(wǎng)頁(yè)上是不會(huì)變化的。我們不能排除視障用戶(hù)（如近視）、老年用戶(hù)不會(huì)這么做，作為一個(gè)具有「人文關(guān)懷」的前端，我們完全可以考慮這些情況。由其是在引入了 CSS預(yù)處理工具之后，這幾乎不會(huì)增加什么成本。

也再次印證前面提到的：響應(yīng)式網(wǎng)頁(yè)不僅僅是響應(yīng)不同類(lèi)型的設(shè)備，而且需要響應(yīng)不同的用戶(hù)需求。

各個(gè)瀏覽器的設(shè)置方法如下：

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

   

2. Chrome 瀏覽器：設(shè)置→顯示高級(jí)設(shè)置→網(wǎng)頁(yè)內(nèi)容

   

3. Firefox 瀏覽器：按下 Alt 鍵，打開(kāi)菜單欄→工具→選項(xiàng)→內(nèi)容選項(xiàng)卡

   

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

三、什么時(shí)候用 rem？

既然 rem 的可用性更好，是不是在所有地方都去使用呢？別捉急，通常在標(biāo)題，正文等大面積文字的位置可以使用 rem。但是在一些特殊的設(shè)計(jì)場(chǎng)景，rem 可能會(huì)導(dǎo)致布局錯(cuò)位，比如這樣一個(gè)回頂部的按鈕：

所以，什么時(shí)候用 rem，如何用好 rem？ 這也需要你拿出 18K的黑色烏金睛來(lái)照亮整個(gè)頁(yè)面。讓我們一起：

拋開(kāi)布局，響應(yīng)文字；拋開(kāi)成見(jiàn)，響應(yīng)內(nèi)心。

在面對(duì)響應(yīng)式開(kāi)發(fā)的時(shí)候，什么才是合適的，什么是不合適的，你真的想好了嗎？

（看圖思考：有個(gè)小姑娘很愛(ài)漂亮，上圖是她正在偷偷的穿他*的高跟鞋……）

下面預(yù)告：

接下來(lái)，第二日講為大家?guī)?lái)《響應(yīng)式十日談第二日：在Media Queries中使用 em 單位》，將為大家講解 Media Queries 中為何要用 em 作為寬度臨界值單位？這將如何提升我們的「情懷和節(jié)操」？歡迎收聽(tīng)我的微博：@jieorlin，30分鐘內(nèi)速回粉哦。