深入理解CSS中的rem單位：一種具有出色瀏覽器兼容性的相對(duì)大小單位，學(xué)習(xí)如何有效地使用它們。

關(guān)鍵要點(diǎn)

1. 理解rem單位: 學(xué)習(xí)CSS rem單位，它相對(duì)于根元素的字體大小，為您的UI中的字體大小和間距提供一致的方法。
2. 比較rem和em單位: 探索CSS中rem和em單位的區(qū)別，rem提供了一種更簡單、更一致的大小調(diào)整方法，避免了與em單位嵌套相關(guān)的復(fù)雜性。
3. 實(shí)際應(yīng)用和可訪問性: 發(fā)現(xiàn)rem單位在響應(yīng)式設(shè)計(jì)、縮放文檔和確保網(wǎng)絡(luò)可訪問性方面的實(shí)際用途，允許用戶根據(jù)自己的喜好調(diào)整字體大小。

什么是rem單位？

在CSS中，rem代表“root em”，這是一個(gè)測(cè)量單位，代表根元素的字體大小。這意味著1rem等于html元素的字體大小，對(duì)于大多數(shù)瀏覽器來說，默認(rèn)值為16px。使用rem可以幫助確保整個(gè)UI中字體大小和間距的一致性。

根據(jù)W3C規(guī)范，一個(gè)rem單位的定義是：

等于根元素上font-size的計(jì)算值。當(dāng)在根元素的font-size屬性上指定時(shí)，rem單位指的是該屬性的初始值。

rem單位與em單位

rem單位和em單位的區(qū)別在于，em單位相對(duì)于自身元素的字體大小，而不是根元素。因此，它們可能會(huì)級(jí)聯(lián)并導(dǎo)致意外的結(jié)果。讓我們考慮以下示例，我們希望列表的字體大小為12px，在根字體大小為默認(rèn)16px的情況下：

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

如果我們有一個(gè)嵌套在另一個(gè)列表中的列表，則內(nèi)部列表的字體大小將是其父級(jí)大小的75%（在本例中為9px）。我們?nèi)匀豢梢酝ㄟ^使用類似以下內(nèi)容來克服這個(gè)問題：

<code>ul ul {font-size: 1em;}</code>

這確實(shí)有效，但是我們?nèi)匀槐仨毞浅Ｗ⒁馇短赘畹那闆r。

使用rem單位，事情就簡單多了：

<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>

由于所有大小都參考根字體大小，因此不再需要在單獨(dú)的聲明中處理嵌套情況。

使用rem單位進(jìn)行字體大小調(diào)整

使用rem單位進(jìn)行字體大小調(diào)整的先驅(qū)之一是Jonathan Snook，他在2011年5月發(fā)表了關(guān)于使用REM進(jìn)行字體大小調(diào)整的文章。像許多其他CSS開發(fā)人員一樣，他不得不面對(duì)em單位在復(fù)雜布局中帶來的問題。

當(dāng)時(shí)，舊版本的IE仍然占據(jù)著很大的市場(chǎng)份額，它們無法縮放使用像素大小的文本。但是，正如我們前面看到的，使用em單位很容易忽略嵌套并獲得意外的結(jié)果。

使用rem進(jìn)行字體大小調(diào)整的主要問題是這些值不太方便使用。讓我們看一個(gè)用rem單位表示的一些常用字體大小的示例，當(dāng)然，假設(shè)基準(zhǔn)大小為16px：

• 10px = 0.625rem
• 12px = 0.75rem
• 14px = 0.875rem
• 16px = 1rem（基準(zhǔn)）
• 18px = 1.125rem
• 20px = 1.25rem
• 24px = 1.5rem
• 30px = 1.875rem
• 32px = 2rem

正如我們所看到的，這些值對(duì)于進(jìn)行計(jì)算來說并不方便。因此，Snook使用了一種稱為“62.5%”的技巧。這絕不是一個(gè)新的發(fā)現(xiàn)，因?yàn)樗呀?jīng)被用于em單位：

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

由于rem單位相對(duì)于根元素，因此Snook的解決方案變?yōu)椋?/p>

<code>ul ul {font-size: 1em;}</code>

我們還必須考慮不支持rem的其他瀏覽器。因此，上面的代碼實(shí)際上是這樣編寫的：

<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>

雖然此解決方案似乎接近“黃金法則”的地位，但有些人建議不要盲目地使用它。Harry Roberts寫了他自己關(guān)于rem單位使用的看法。在他看來，雖然62.5%的解決方案使計(jì)算更容易（因?yàn)閜x中的字體大小是其rem值的10倍），但它最終迫使開發(fā)人員顯式地重寫其網(wǎng)站中的所有字體大小。

第三種觀點(diǎn)來自CSS-Tricks的Chris Coyier。他的解決方案使用了我們目前遇到的所有三個(gè)單位。他保留了以px定義的根大小，以rem單位定義的模塊，以及以em單位大小的模塊內(nèi)元素。這種方法更容易操作全局大小，這會(huì)縮放模塊中的類型，而模塊內(nèi)容則基于模塊本身的字體大小進(jìn)行縮放。Louis Lazaris后來在《CSS中em單位的力量》中討論了這個(gè)概念。

在下面的示例中，您可以看到Chris的方法是什么樣的：

[CodePen示例鏈接 - 此處應(yīng)插入CodePen的嵌入代碼，但由于我無法訪問外部網(wǎng)站，我無法提供。]

在實(shí)踐中，像Bootstrap 4和Material Design指南這樣的主要框架使用rem單位來調(diào)整文本內(nèi)容的大小。

特別要提到的是Material-UI，這是一個(gè)非常流行的React組件集合。他們不僅以相同的方式調(diào)整文本大小，而且還提供了一種實(shí)現(xiàn)我們前面提到的“10px簡化”的機(jī)制。

另一個(gè)最近的項(xiàng)目Every Layout以一種非常有創(chuàng)意的方式結(jié)合了em和rem單位。它最接近前面提到的Chris Coyier的模型概述，并且它使用em單位來強(qiáng)調(diào)內(nèi)聯(lián)元素，如SVG圖標(biāo)、span或其他類似元素。

正如您所看到的，沒有“萬能的”解決方案?？赡艿慕M合僅受開發(fā)人員的想象力限制。

在媒體查詢斷點(diǎn)中使用rems

在媒體查詢中使用em或rem單位與“最佳行長”的概念及其對(duì)閱讀體驗(yàn)的影響密切相關(guān)。Smashing Magazine發(fā)表了一篇關(guān)于網(wǎng)絡(luò)排版的綜合研究文章，名為《大小很重要：在響應(yīng)式網(wǎng)頁設(shè)計(jì)中平衡行長和字體大小》。在許多其他有趣的事情中，文章給出了最佳行長的估計(jì)值：45到75-85個(gè)字符之間（包括空格和標(biāo)點(diǎn)符號(hào)），其中65是“理想”的目標(biāo)值。

使用1rem = 1字符的粗略估計(jì)，我們可以控制單列內(nèi)容的文本流，采用移動(dòng)優(yōu)先方法：

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

但是，在媒體查詢中用作單位時(shí)，rem和em單位有一個(gè)有趣的細(xì)節(jié)：它們始終保持1rem = 1em = 瀏覽器設(shè)置的字體大小的相同值。此行為的原因在媒體查詢規(guī)范中進(jìn)行了解釋（重點(diǎn)突出）：

媒體查詢中的相對(duì)單位基于初始值，這意味著單位從不基于聲明的結(jié)果。例如，在HTML中，em單位相對(duì)于font-size的初始值，由用戶代理或用戶的偏好定義，而不是頁面上的任何樣式。

讓我們快速了解一下這種行為的示例：

[CodePen示例鏈接 - 此處應(yīng)插入CodePen的嵌入代碼，但由于我無法訪問外部網(wǎng)站，我無法提供。]

首先，在我們的HTML中，我們有一個(gè)元素，我們將在其中寫入視口的寬度：

<code>ul ul {font-size: 1em;}</code>

接下來，我們有兩個(gè)媒體查詢，一個(gè)使用rem單位，另一個(gè)使用em單位（這使用Sass是為了簡單起見）：

<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>

最后，我們使用一些jQuery在頁面上顯示視口寬度，并在窗口大小改變時(shí)更新該值：

<code>body { font-size:62.5%; } /* =10px */h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px? */</code>

我們從62.5%的技巧開始，以表明修改后的根字體大小對(duì)媒體查詢中使用的值沒有任何影響。當(dāng)我們更改瀏覽器窗口的寬度時(shí)，我們可以看到第一個(gè)媒體查詢?cè)?20px（20 × 16px）處啟動(dòng)，而第二個(gè)媒體查詢?cè)?80px（30 × 16px）處啟動(dòng)。我們聲明的字體大小更改對(duì)斷點(diǎn)沒有任何影響。更改媒體查詢斷點(diǎn)值的唯一方法是修改瀏覽器設(shè)置中的默認(rèn)字體大小。

因此，在媒體查詢斷點(diǎn)中使用em或rem單位實(shí)際上并沒有什么區(qū)別。Zurb Foundation（目前在撰寫本文時(shí)為v6.5.3）在媒體查詢中使用了em單位。

可訪問性追求

我們上面已經(jīng)看到，基于根字體大小進(jìn)行縮放的能力使rem單位對(duì)于可訪問性非常有用。Google開發(fā)人員建議使用相對(duì)單位進(jìn)行文本大小調(diào)整。

互聯(lián)網(wǎng)檔案背后的工作人員進(jìn)行了一項(xiàng)實(shí)證研究，結(jié)果表明，大量用戶會(huì)更改其瀏覽器設(shè)置中的默認(rèn)字體大小。通過使用rem和其他相對(duì)單位，您可以尊重用戶關(guān)于他們希望如何瀏覽網(wǎng)頁的決定。

使用rem單位縮放文檔

我們可以找到rem單位的第三個(gè)用途是構(gòu)建可縮放的組件。通過以rem單位表示寬度、邊距和填充，可以創(chuàng)建與根字體大小同步增長或縮小的界面。讓我們看看這個(gè)東西是如何使用幾個(gè)例子工作的。

[CodePen示例鏈接1 - 此處應(yīng)插入CodePen的嵌入代碼，但由于我無法訪問外部網(wǎng)站，我無法提供。]

[CodePen示例鏈接2 - 此處應(yīng)插入CodePen的嵌入代碼，但由于我無法訪問外部網(wǎng)站，我無法提供。]

結(jié)論

我們?cè)谶@里結(jié)束與CSS rem單位的相遇。很明顯，在我們的代碼中使用這些單位有很多優(yōu)點(diǎn)，例如響應(yīng)性、可伸縮性、改進(jìn)的閱讀體驗(yàn)和更大的組件定義靈活性。Rem單位不是通用的萬能解決方案，但是，通過仔細(xì)部署，它們可以解決困擾開發(fā)人員多年的許多問題。這取決于我們每個(gè)人來釋放rems的全部潛力。啟動(dòng)您的編輯器，進(jìn)行實(shí)驗(yàn)，并與我們其他人分享您的結(jié)果。

有關(guān)CSS大小單位的更多信息，請(qǐng)參閱：

• 了解CSS中的長度單位
• 新的CSS3相對(duì)字體大小單位
• CSS中em單位的力量

當(dāng)然，Rem不是唯一可用的CSS單位。查看我們的CSS大小單位概述。

關(guān)于CSS中Rem的常見問題解答

CSS中rem和em單位有什么區(qū)別？

CSS中rem和em單位的主要區(qū)別在于它們計(jì)算大小的參考點(diǎn)。em單位相對(duì)于其最近的父元素的字體大小。如果您嵌套元素，則每個(gè)級(jí)別都可能根據(jù)其父級(jí)的大小具有不同的字體大小，從而導(dǎo)致復(fù)合大小。另一方面，rem代表“root em”。它只相對(duì)于根元素（html），這使得它在文檔中的任何位置使用都是一致的。這使得rem單位在大型CSS文件中更易于預(yù)測(cè)和管理。

如何將像素轉(zhuǎn)換為CSS中的rem單位？

要將像素轉(zhuǎn)換為rem單位，您需要知道文檔的基準(zhǔn)字體大小，通常為16px（大多數(shù)瀏覽器的默認(rèn)大?。＾D(zhuǎn)換公式為：目標(biāo)像素值/基準(zhǔn)字體大小=rem值。例如，如果您想要24px的字體大小，則rem中的等效值為24px/16px=1.5rem。

我可以將rem單位用于字體大小以外的屬性嗎？

是的，rem單位可以用于任何需要長度值的CSS屬性，而不僅僅是字體大小。這包括width、height、padding、margin和line-height等屬性。將rem單位用于這些屬性可以幫助在不同的屏幕尺寸上保持成比例的間距和布局。

所有瀏覽器都支持rem單位嗎？

是的，所有現(xiàn)代瀏覽器都廣泛支持rem單位，包括Chrome、Firefox、Safari、Edge和Internet Explorer 9及更高版本。但是，對(duì)于不支持rem單位的舊版瀏覽器，您可以提供像素回退。

使用rem單位如何有利于響應(yīng)式設(shè)計(jì)？

rem單位對(duì)于響應(yīng)式設(shè)計(jì)非常有益。由于rem相對(duì)于根元素，因此更改根字體大小允許您調(diào)整以rem定義的所有元素的大小。這可以在媒體查詢中完成，允許為不同的屏幕尺寸提供不同的字體大小，從而使您的設(shè)計(jì)具有響應(yīng)性。

使用rem單位對(duì)可訪問性的影響是什么？

使用rem單位可以顯著提高您網(wǎng)站的可訪問性。有些用戶可能會(huì)調(diào)整其瀏覽器的默認(rèn)字體大小以提高可讀性。由于rem單位相對(duì)于此基準(zhǔn)字體大小，它允許您的網(wǎng)站的布局和間距根據(jù)用戶的偏好進(jìn)行調(diào)整，從而改善整體用戶體驗(yàn)。

如何覆蓋以rem單位定義的樣式？

您可以通過使用CSS特異性或!important規(guī)則來覆蓋以rem單位定義的樣式。但是，建議謹(jǐn)慎使用這些方法，而應(yīng)以一種最大限度地減少對(duì)覆蓋的需求的方式來構(gòu)建您的CSS。

我可以將rem單位與其他單位（如像素或百分比）組合使用嗎？

是的，rem單位可以與其他單位（如像素或百分比）組合使用。這可以為您的設(shè)計(jì)提供更大的靈活性。例如，您可以將像素用于邊框?qū)挾龋ú恍枰S文本大小縮放），并將rem單位用于填充（需要）。

如何設(shè)置rem單位的基準(zhǔn)字體大??？

rem單位的基準(zhǔn)字體大小是在根元素（html）上使用font-size屬性設(shè)置的。例如，如果您希望基準(zhǔn)字體大小為10px，則可以使用：html { font-size: 10px; }。然后，所有rem單位都將相對(duì)于此大小。

使用CSS中rem單位的最佳實(shí)踐是什么？

在CSS中使用rem單位的一些最佳實(shí)踐包括：在根元素上設(shè)置合理的基準(zhǔn)字體大小；將rem單位用于需要隨文本大小縮放的屬性；為舊版瀏覽器提供像素回退；以及在不同的字體大小下測(cè)試您的設(shè)計(jì)，以確保它保持可訪問性和視覺平衡。

以上是REM在CSS中：理解和使用REM單位的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！