響應(yīng)式網(wǎng)頁不僅僅是響應(yīng)不同類型的設(shè)備，而且需要響應(yīng)不同的用戶需求。響應(yīng)式的初衷是為了讓信息更好地傳遞和交流，讓所有人無障礙地獲取信息。同樣的，響應(yīng)式設(shè)計(jì)應(yīng)該遵循「內(nèi)容優(yōu)先，移動(dòng)優(yōu)先」的原則。在網(wǎng)頁中，

響應(yīng)式網(wǎng)頁不僅僅是響應(yīng)不同類型的設(shè)備，而且需要響應(yīng)不同的用戶需求。響應(yīng)式的初衷是為了讓信息更好地傳遞和交流，讓所有人無障礙地獲取信息。同樣的，響應(yīng)式設(shè)計(jì)應(yīng)該遵循「內(nèi)容優(yōu)先，移動(dòng)優(yōu)先」的原則。在網(wǎng)頁中，內(nèi)容主要由文字、圖片等元素組成。那么，我們?nèi)绾螌?shí)現(xiàn)文字的響應(yīng)式呢？

rem是什么？

在規(guī)范中明確寫道：「rem」指的是根元素（root element，即html）的字體大小。有趣的是，從舊版本的IE6到現(xiàn)代瀏覽器Chrome，它們約定根元素默認(rèn)的font-size都是16px。這個(gè)新的單位在兼容性方面表現(xiàn)如何呢？讓我們來看一下Caniuse的數(shù)據(jù)吧！太棒了，IE9以及主流版本的Firefox、Chrome、Safari、Opera都支持rem。這意味著我們可以放心地使用rem了。

那為什么W3C要新增這樣一個(gè)單位呢？它和em有什么區(qū)別呢？我們知道em的計(jì)算是基于父級(jí)元素的，在實(shí)際使用中給我們帶來了很多不便。因此，rem的出現(xiàn)解決了這個(gè)問題，不用再擔(dān)心父級(jí)元素的font-size了，因?yàn)樗冀K是基于根元素（html）的。比如，默認(rèn)的html font-size16px，如果我們想要設(shè)置12px的文字大小，可以通過計(jì)算得到12/160.75rem。當(dāng)然，你也可以使用CSS預(yù)處理工具（如Sass、LESS、Stylus等）自動(dòng)計(jì)算rem值。

但是，如果你還沒有引入CSS預(yù)處理工具，該怎么辦呢？你可以將html的默認(rèn)font-size設(shè)置為10px，這樣計(jì)算就會(huì)變得簡(jiǎn)單。示例代碼如下：

```

html {

font-size: 62.5%; /* 10/1662.5% */

}

body {

font-size: 12px;

font-size: 1.2rem;

}

p {

font-size: 14px;

font-size: 1.4rem;

}

```

需要注意的是，為了兼容不支持rem的瀏覽器，我們需要在rem前面寫上對(duì)應(yīng)的px值，這樣不支持rem的瀏覽器可以優(yōu)雅降級(jí)。無論是將html的font-size設(shè)置為100%還是設(shè)置為62.5%，都沒有太大區(qū)別。如果你引入了CSS預(yù)處理工具，自然可以使用默認(rèn)值。如果由于其他原因使用font-size: 62.5%，也無可厚非，你完全可以在body中重新設(shè)置你需要的默認(rèn)font-size。

為什么要使用rem？

瀏覽器中的用戶可以自定義默認(rèn)的文字大小。如果使用px單位，當(dāng)用戶在瀏覽器設(shè)置中改變了文字大小后，網(wǎng)頁上的文字大小不會(huì)隨之變化。作為有人文關(guān)懷的前端開發(fā)者，我們應(yīng)該考慮到這些情況，特別是視障用戶（如近視）和老年用戶。尤其是在引入CSS預(yù)處理工具之后，使用rem幾乎不會(huì)增加額外成本。這再次印證了響應(yīng)式網(wǎng)頁需要響應(yīng)不同用戶需求的原則。

不同瀏覽器中設(shè)置文字大小的方法如下：

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

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

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

如何使用rem？

既然rem具有更好的兼容性，那么我們是不是應(yīng)該在所有地方都使用rem呢？并不是，我們需要根據(jù)實(shí)際情況來決定。通常，在標(biāo)題、正文等大面積文字的位置可以使用rem。但是在一些特殊的設(shè)計(jì)場(chǎng)景下，rem可能會(huì)導(dǎo)致布局錯(cuò)位。比如，一個(gè)回到頂部的按鈕。

所以，我們需要根據(jù)具體情況來決定是否使用rem，并且需要靈活運(yùn)用rem來實(shí)現(xiàn)優(yōu)雅的頁面布局。