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

• 使用諸如“em”之類的相對(duì)單位來設(shè)置文本大小以及元素內(nèi)外間距，比使用像素更靈活，尤其是在響應(yīng)式項(xiàng)目中。但是，“em”單位可能會(huì)導(dǎo)致嵌套元素出現(xiàn)問題，使它們?cè)诿總€(gè)嵌套級(jí)別呈指數(shù)級(jí)增長或縮小。
• “rem”單位是設(shè)置字體大小更可靠的替代方案，因?yàn)樗冀K基於根元素的字體大小計(jì)算。這避免了在嵌套元素中使用“em”單位時(shí)出現(xiàn)的指數(shù)級(jí)增長或縮小的問題。
• 對(duì)於瀏覽器支持，特別是對(duì)於舊版本的 Internet Explorer，可以使用 JS polyfill 或 px 備用方案。如果使用 Sass，可以創(chuàng)建混合宏和函數(shù)來計(jì)算所需的 rem 大小並自動(dòng)提供備用方案。

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

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

R 代表 rem 和 em

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

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

使用 em 的優(yōu)缺點(diǎn)

在處理響應(yīng)式項(xiàng)目時(shí)，使用 em 等相對(duì)單位來設(shè)置文本大小以及元素內(nèi)外間距比使用像素更靈活。這是因?yàn)榇藛挝幌鄬?duì)於其父元素的字體大小，允許元素的大小、間距和文本內(nèi)容隨著父元素的字體大小變化而按比例增長。

使用這些相對(duì)單位，您可以構(gòu)建一個(gè)比例係統(tǒng)，其中更改一個(gè)元素的字體大小值會(huì)對(duì)其中的子元素產(chǎn)生級(jí)聯(lián)效應(yīng)。比例係統(tǒng)是一件好事，但 em 的這種行為確實(shí)存在缺點(diǎn)。

考慮以下 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>

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

如果我們想讓列表項(xiàng)脫穎而出，我們可以將其字體大小設(shè)置為 16px 基準(zhǔn)大小的 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>

但這會(huì)導(dǎo)致嵌套 li 出現(xiàn)問題，因?yàn)樗鼈兊拇笮∫矔?huì)是其父元素的 1.5 倍。嵌套項(xiàng)將是 24px 的 1.5 倍，而不是 16px 的 1.5 倍。結(jié)果是，任何嵌套列表項(xiàng)都會(huì)在每個(gè)嵌套級(jí)別呈指數(shù)級(jí)增長。這可能不是設(shè)計(jì)者想要的結(jié)果！

類似的問題也發(fā)生在嵌套元素和 em 值小於 1 的情況下。在這種情況下，任何嵌套項(xiàng)都會(huì)在每個(gè)嵌套級(jí)別不斷減小。

那麼我們?cè)撛觞N做呢？

使用 rem 設(shè)置文本大小

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

我們可以使用像素，但如前所述，相對(duì)單位在響應(yīng)式項(xiàng)目中更靈活。相反，我們可以使用 rem 單位，因?yàn)檫@始終基於根元素的字體大小計(jì)算，在網(wǎng)站或 Web 應(yīng)用程序的情況下，根元素通常是 html 元素。在 .svg 或 .xml 文檔中，根元素可能不同，但這些類型的文檔不在我們目前的討論範(fàn)圍內(nèi)。

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

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

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

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

如果您使用 Sass，您可以創(chuàng)建一個(gè)混合宏和一個(gè)函數(shù)來計(jì)算所需的 rem 大小並自動(dòng)提供備用方案。

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

就是這樣。關(guān)於使用 rem 的一些快速提示。如果您當(dāng)前的項(xiàng)目中沒有使用它們，我強(qiáng)烈建議您嘗試一下。

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

REM 和 EM 在 CSS 中的主要區(qū)別是什麼？

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

我應(yīng)該何時(shí)在 CSS 中使用 REM 而不是 EM？

當(dāng)您想要在整個(gè)網(wǎng)站上創(chuàng)建一致且可預(yù)測的大小調(diào)整時(shí)，通常使用 REM。由於 REM 相對(duì)於根元素，因此無論您的元素嵌套多深，大小調(diào)整都將保持一致。這對(duì)於構(gòu)建響應(yīng)式設(shè)計(jì)特別有用，在響應(yīng)式設(shè)計(jì)中，一致性和可預(yù)測性至關(guān)重要。但是，當(dāng)您想要?jiǎng)?chuàng)建更動(dòng)態(tài)和可縮放的設(shè)計(jì)時(shí)，可以使用 EM，其中元素的大小相對(duì)於其父元素。

如何在 CSS 中將像素轉(zhuǎn)換為 REM 或 EM？

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

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

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

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

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

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

REM 和 EM 單位可以通過使其更易於縮放和響應(yīng)用戶設(shè)置來極大地增強(qiáng)您網(wǎng)站的輔助功能。由於這些單位是相對(duì)的，因此它們?cè)试S用戶根據(jù)自己的偏好調(diào)整基準(zhǔn)字體大小，而不會(huì)破壞佈局。這對(duì)於可能需要增加字體大小以提高可讀性的視力障礙用戶尤其有益。

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

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

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

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

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

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

使用 EM 單位時(shí)如何處理嵌套元素？

使用 EM 單位時(shí)，嵌套元素可能會(huì)成為一個(gè)挑戰(zhàn)，因?yàn)榇笮?huì)復(fù)合。處理此問題的一種方法是將嵌套元素的字體大小重置為 1em，這將使其等於其父元素的字體大小?；蛘?，您可以對(duì)嵌套元素使用 REM 單位，以確保大小調(diào)整的一致性。

以上是ATOZ CSS快速提示：REM和EM值的好處的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！