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

關(guān)鍵要點

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

什麼是rem單位？

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

根據(jù)W3C規(guī)範(fàn)，一個rem單位的定義是：

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

rem單位與em單位

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

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

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

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

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

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

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

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

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

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

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

使用rem進行字體大小調(diào)整的主要問題是這些值不太方便使用。讓我們看一個用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

正如我們所看到的，這些值對於進行計算來說並不方便。因此，Snook使用了一種稱為“62.5%”的技巧。這絕不是一個新的發(fā)現(xiàn)，因為它已經(jīng)被用於em單位：

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

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

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

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

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

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

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

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

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

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

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

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

正如您所看到的，沒有“萬能的”解決方案。可能的組合僅受開發(fā)人員的想像力限制。

在媒體查詢斷點中使用rems

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

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

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

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

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

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

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

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

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

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

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

最後，我們使用一些jQuery在頁面上顯示視口寬度，並在窗口大小改變時更新該值：

<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%的技巧開始，以表明修改後的根字體大小對媒體查詢中使用的值沒有任何影響。當(dāng)我們更改瀏覽器窗口的寬度時，我們可以看到第一個媒體查詢在320px（20 × 16px）處啟動，而第二個媒體查詢在480px（30 × 16px）處啟動。我們聲明的字體大小更改對斷點沒有任何影響。更改媒體查詢斷點值的唯一方法是修改瀏覽器設(shè)置中的默認字體大小。

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

可訪問性追求

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

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

使用rem單位縮放文檔

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

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

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

結(jié)論

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

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

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

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

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

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

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

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

要將像素轉(zhuǎn)換為rem單位，您需要知道文檔的基準(zhǔn)字體大小，通常為16px（大多數(shù)瀏覽器的默認大小）。轉(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及更高版本。但是，對於不支持rem單位的舊版瀏覽器，您可以提供像素回退。

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

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

使用rem單位對可訪問性的影響是什麼？

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

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

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

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

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

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

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

使用CSS中rem單位的最佳實踐是什麼？

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

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