ATOZ CSS快速提示：REM和EM值的好處

關鍵要點

• 使用諸如“em”之類的相對單位來設置文本大小以及元素內外間距，比使用像素更靈活，尤其是在響應式項目中。但是，“em”單位可能會導致嵌套元素出現問題，使它們在每個嵌套級別呈指數級增長或縮小。
• “rem”單位是設置字體大小更可靠的替代方案，因為它始終基於根元素的字體大小計算。這避免了在嵌套元素中使用“em”單位時出現的指數級增長或縮小的問題。
• 對於瀏覽器支持，特別是對於舊版本的 Internet Explorer，可以使用 JS polyfill 或 px 備用方案。如果使用 Sass，可以創建混合宏和函數來計算所需的 rem 大小並自動提供備用方案。

本文是我們的 AtoZ CSS 系列的一部分。您可以在此處找到該系列的其他條目。您可以在此處查看其相應視頻（關於 :required 偽類的視頻）的完整文本和屏幕截圖。

歡迎來到我們的 AtoZ CSS 系列！在本系列中，我將探索不同的 CSS 值（和屬性），每個值都以字母表中的不同字母開頭。我們知道有時屏幕截圖是不夠的，因此在本文中，我們添加了一些關於使用 rem 和 em 值的快速提示。

R 代表 rem 和 em

在最初的屏幕截圖視頻中，我們了解了 :required 偽類，它可用於為必須填寫字段的表單設置樣式。

表單、驗證和样式狀態是重要的主題，但我們第一次討論 :required 時並沒有遺漏太多內容。因此，讓我們來看一下使用 rem 測量單位的幾個快速提示。但首先，讓我們來看另一種相對單位：em。

使用 em 的優缺點

在處理響應式項目時，使用 em 等相對單位來設置文本大小以及元素內外間距比使用像素更靈活。這是因為此單位相對於其父元素的字體大小，允許元素的大小、間距和文本內容隨著父元素的字體大小變化而按比例增長。

使用這些相對單位，您可以構建一個比例係統，其中更改一個元素的字體大小值會對其中的子元素產生級聯效應。比例係統是一件好事，但 em 的這種行為確實存在缺點。

考慮以下 HTML 代碼片段：

<ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul>

這個嵌套列表並不是世界上最常見的東西，但它很可能出現在條款和條件頁面或其他類型的正式文件中。

如果我們想讓列表項脫穎而出，我們可以將其字體大小設置為 16px 基準大小的 1.5 倍。

<ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul>

但這會導致嵌套 li 出現問題，因為它們的大小也會是其父元素的 1.5 倍。嵌套項將是 24px 的 1.5 倍，而不是 16px 的 1.5 倍。結果是，任何嵌套列表項都會在每個嵌套級別呈指數級增長。這可能不是設計者想要的結果！

類似的問題也發生在嵌套元素和 em 值小於 1 的情況下。在這種情況下，任何嵌套項都會在每個嵌套級別不斷減小。

那麼我們該怎麼做呢？

使用 rem 設置文本大小

為了避免字體大小不斷增大或減小，我們可以使用替代單位。

我們可以使用像素，但如前所述，相對單位在響應式項目中更靈活。相反，我們可以使用 rem 單位，因為這始終基於根元素的字體大小計算，在網站或 Web 應用程序的情況下，根元素通常是 html 元素。在 .svg 或 .xml 文檔中，根元素可能不同，但這些類型的文檔不在我們目前的討論範圍內。

如果我們使用 rem 設置字體大小，並不意味著 em 就永遠不會被使用。我傾向於使用 em 來設置元素內的填充，以便間距始終相對於文本大小。

使用 Sass 來幫助 rem 瀏覽器支持

rem 單位僅從 IE9 及更高版本開始支持。如果您需要支持 IE8（或更低版本），則可以使用 JS polyfill 或以以下方式提供 px 備用方案：

li {
  font-size: 1.5em; /* 24px/16px */
}

如果您使用 Sass，您可以創建一個混合宏和一個函數來計算所需的 rem 大小並自動提供備用方案。

li {
  font-size: 24px;
  font-size: 1.5rem;
}

就是這樣。關於使用 rem 的一些快速提示。如果您當前的項目中沒有使用它們，我強烈建議您嘗試一下。

CSS 中 REM 和 EM 值的常見問題解答 (FAQ)

REM 和 EM 在 CSS 中的主要區別是什麼？

CSS 中 REM 和 EM 的主要區別在於它們計算大小的參考點。 EM 相對於其最近的父元素或當前元素的字體大小。這意味著如果您嵌套元素，每個元素都使用 EM 定義字體大小，則大小會復合，並可能很快變得難以控制。另一方面，REM 相對於根元素（或 html 元素）。這意味著無論元素嵌套多深，如果您使用 REM 定義其字體大小，它都將引用 html 元素的字體大小，從而在您的網站上提供一致的大小。

我應該何時在 CSS 中使用 REM 而不是 EM？

當您想要在整個網站上創建一致且可預測的大小調整時，通常使用 REM。由於 REM 相對於根元素，因此無論您的元素嵌套多深，大小調整都將保持一致。這對於構建響應式設計特別有用，在響應式設計中，一致性和可預測性至關重要。但是，當您想要創建更動態和可縮放的設計時，可以使用 EM，其中元素的大小相對於其父元素。

如何在 CSS 中將像素轉換為 REM 或 EM？

要將像素轉換為 REM 或 EM，您首先需要知道文檔的基準字體大小。這通常在 html 元素上設置，通常為 16px，但可以是任何值。一旦知道基準字體大小，就可以通過將所需的像素值除以基準字體大小來計算 REM 或 EM 值。例如，如果您的基準字體大小為 16px，並且您想要 24px 的字體大小，則計算結果為 24 / 16 = 1.5rem 或 1.5em。

可以互換使用 REM 和 EM 單位嗎？

雖然 REM 和 EM 單位都可以用於在 CSS 中定義大小，但由於它們的參考點不同，因此它們不能互換使用。 REM 始終相對於根元素，而 EM 相對於最近的父元素或當前元素。這意味著相同的 REM 或 EM 值可能會產生不同的尺寸，具體取決於其使用的上下文。

瀏覽器兼容性如何影響 REM 和 EM 單位的使用？

REM 和 EM 單位在所有現代瀏覽器中都得到了很好的支持，包括 Chrome、Firefox、Safari 和 Edge。但是，如果您需要支持舊版本的 Internet Explorer（IE 8 或更早版本），則應該注意這些瀏覽器不支持 REM 單位。在這種情況下，您可能需要使用像素備用方案或考慮使用 EM 單位，後者俱有更廣泛的瀏覽器支持。

REM 和 EM 單位如何影響輔助功能？

REM 和 EM 單位可以通過使其更易於縮放和響應用戶設置來極大地增強您網站的輔助功能。由於這些單位是相對的，因此它們允許用戶根據自己的偏好調整基準字體大小，而不會破壞佈局。這對於可能需要增加字體大小以提高可讀性的視力障礙用戶尤其有益。

使用 REM 和 EM 單位的最佳實踐是什麼？

一種最佳實踐是使用 REM 單位來定義字體大小、邊距和填充，以確保整個網站的一致性。您可以將 EM 單位用於需要與其父元素一起縮放的元素，例如下拉菜單或工具提示。在 html 元素上以百分比定義基準字體大小也是一個好主意，這允許用戶根據自己的偏好調整基準字體大小。

REM 和 EM 單位如何與媒體查詢配合使用？

REM 和 EM 單位可以像其他任何單位一樣在媒體查詢中使用。但是，由於這些單位是相對的，因此它們可以使您的媒體查詢更靈活且更具響應性。例如，如果您使用 EM 單位定義斷點，它們將隨著基準字體大小而縮放，從而允許您的佈局適應用戶設置。

我可以將 REM 和 EM 單位用於文本以外的元素嗎？

是的，REM 和 EM 單位可以用於 CSS 中的任何大小定義，而不僅僅是文本。這包括寬度、高度、填充、邊距、邊框寬度，甚至定位。將 REM 和 EM 單位用於這些屬性可以使您的佈局更靈活且更具響應性。

使用 EM 單位時如何處理嵌套元素？

使用 EM 單位時，嵌套元素可能會成為一個挑戰，因為大小會復合。處理此問題的一種方法是將嵌套元素的字體大小重置為 1em，這將使其等於其父元素的字體大小。或者，您可以對嵌套元素使用 REM 單位，以確保大小調整的一致性。

以上是ATOZ CSS快速提示：REM和EM值的好處的詳細內容。更多資訊請關注PHP中文網其他相關文章！