REM在CSS中：理解和使用REM單位

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

關鍵要點

1. 理解rem單位: 學習CSS rem單位，它相對於根元素的字體大小，為您的UI中的字體大小和間距提供一致的方法。
2. 比較rem和em單位: 探索CSS中rem和em單位的區別，rem提供了一種更簡單、更一致的大小調整方法，避免了與em單位嵌套相關的複雜性。
3. 實際應用和可訪問性: 發現rem單位在響應式設計、縮放文檔和確保網絡可訪問性方面的實際用途，允許用戶根據自己的喜好調整字體大小。

什麼是rem單位？

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

根據W3C規範，一個rem單位的定義是：

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

rem單位與em單位

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

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

如果我們有一個嵌套在另一個列表中的列表，則內部列表的字體大小將是其父級大小的75%（在本例中為9px）。我們仍然可以通過使用類似以下內容來克服這個問題：

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

這確實有效，但是我們仍然必須非常注意嵌套更深的情況。

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

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

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

使用rem單位進行字體大小調整

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

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

使用rem進行字體大小調整的主要問題是這些值不太方便使用。讓我們看一個用rem單位表示的一些常用字體大小的示例，當然，假設基準大小為16px：

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

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

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

由於rem單位相對於根元素，因此Snook的解決方案變為：

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

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

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

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

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

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

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

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

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

另一個最近的項目Every Layout以一種非常有創意的方式結合了em和rem單位。它最接近前面提到的Chris Coyier的模型概述，並且它使用em單位來強調內聯元素，如SVG圖標、span或其他類似元素。

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

在媒體查詢斷點中使用rems

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

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

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

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

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

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

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

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

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

可訪問性追求

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

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

使用rem單位縮放文檔

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

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

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

結論

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

有關CSS大小單位的更多信息，請參閱：

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

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

關於CSS中Rem的常見問題解答

CSS中rem和em單位有什麼區別？

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

如何將像素轉換為CSS中的rem單位？

要將像素轉換為rem單位，您需要知道文檔的基準字體大小，通常為16px（大多數瀏覽器的默認大小）。轉換公式為：目標像素值/基準字體大小=rem值。例如，如果您想要24px的字體大小，則rem中的等效值為24px/16px=1.5rem。

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

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

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

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

使用rem單位如何有利於響應式設計？

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

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

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

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

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

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

是的，rem單位可以與其他單位（如像素或百分比）組合使用。這可以為您的設計提供更大的靈活性。例如，您可以將像素用於邊框寬度（不需要隨文本大小縮放），並將rem單位用於填充（需要）。

如何設置rem單位的基準字體大小？

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

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

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

以上是REM在CSS中：理解和使用REM單位的詳細內容。更多資訊請關注PHP中文網其他相關文章！