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

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

rem是什么？

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

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

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

```

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前面寫上對應的px值，這樣不支持rem的瀏覽器可以優(yōu)雅降級。無論是將html的font-size設置為100%還是設置為62.5%，都沒有太大區(qū)別。如果你引入了CSS預處理工具，自然可以使用默認值。如果由于其他原因使用font-size: 62.5%，也無可厚非，你完全可以在body中重新設置你需要的默認font-size。

為什么要使用rem？

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

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

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

- Chrome瀏覽器：設置→顯示高級設置→網(wǎng)頁內容

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

如何使用rem？

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

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