你可能不會在晚上夢到 CSS 元素的大小，但如果你正在構建一個網站或應用程式，這個話題絕對值得思考。
有些 CSS 單元能很好地配合你的響應式設計，而另一些則可能表現出反叛的傾向。如果能分辨出不同的字元，就能省去很多麻煩。
比如 REM 和 EM 的搭配。你應該使用哪一種，為什麼？
在接下來的幾段中，我們將為您揭曉答案！
REM 與 EM 簡述
如果您想快速找到答案，這裡有一個簡短的答案：
- REM：該單元基於根元素（通常是
<html>標籤）。無論頁面上發生了什麼，你的尺寸都將保持一致。 - EM：該單元向上尋求指導。如果父元素髮生變化，你的尺寸也會跟著變化。
如果你想記住兩者的區別，請記住 REM 中的 “R” 代表根。
注：為什麼兩個單位都以 “EM” 結尾？這不是縮寫。早在所有文字都是印刷品的時候，排字工人就用大寫字母 M 的寬度作為文字大小的基準。很有趣吧？
那麼，你應該使用哪一個呢？
這要看情況。
如果你想讓文字適應周圍的環境，EM 可能是更好的選擇。但如果你希望整個網站的文字大小保持一致，就應該改用 REM。
為什麼？
- EM：更靈活，但一不小心就會亂套。
- REM：大小一致，非常適合響應式設計。
還在困惑嗎？別擔心，我們馬上會深入探討。
現在只需記住這一點： 對於大多數網站來說，REM 通常是更安全的選擇。
瞭解 REM 和 EM
好吧，讓我們來深入瞭解一下。
REM 和 EM 都是相對單位。這意味著它們 相對 於特定的尺度保持相同的大小 。
這種尺寸在響應式設計中起著關鍵作用。
絕對尺寸（如 px）始終保持不變，這意味著文字在桌上型電腦上看起來很小，而在手機上卻很大。相比之下，相對單位可以適應不同的裝置和佈局。
在數字環境中，REM 和 EM 仍主要用於測量文字。不過，您也可以將這些單位用於以下方面
- 邊距
- 填充
- 寬度和高度
- 行高
- 邊框屬性
- 框陰影
- 定位
- 媒體查詢
換句話說，只要你想在設計中靈活調整大小，REM 和 EM 就能派上用場。
好了，這兩個單元的共同點就介紹到這裡。
現在，讓我們仔細看看它們各自的獨特之處。
瞭解 REM
REM 代表 “root em”。使用該單位時，您要定義的是相對於根元素（通常是 <html> 標記）的字型大小而言，某些內容應該有多大。
大多數瀏覽器預設根元素的字型大小為16px。不過，最好使用 CSS 來定義預設字型大小。
您可以這樣做
html { font-size: 16px; /* Your base font size */ }
無論您選擇的字型大小是多少，都會變成 1rem。這就是整個頁面的新基線。
相對於您選擇的預設值，任何增大或減小的數字都會改變目標元素的大小。
要解釋清楚有點複雜，下面是一個簡單的例子：
html { font-size: 16px; /* Your base font size */ }
body { font-size: 1.2rem; /* 19.2px */ }
h1 { font-size: 2.4rem; /* 38.4px */ }
在這種情況下，我們將 <html> 標記的字型大小定義為 16px。這就是我們的基準值 1rem。
我們希望正文文字比它大一點。因此，我們將 <body> 字型大小設定為 1.2rem。這就是基線的 120%。
頁面的主標題需要大一些。通過將 <h1> 字型大小設定為 2.4rem，我們可以使標題的大小達到基線的 240%。
最終的結果會是這樣的：
為什麼使用 REM？
該系統有哪些優勢？
在 CSS 中，REM 裝置具有一些相當不錯的優點：
- 真正的一致性：所有內容都會根據根大小按比例縮放，因此您的設計在任何裝置上都會呈現您想要的效果。
- 響應性：按比例縮放意味著您的網站或應用程式可以適應各種裝置。
- 易於維護：當您的所有樣式都基於相同的根設定時，就很容易根據需要進行全面更改–您不需要訪問每一個元素並手動更改字型大小。這也為您節省了大量時間。
- 極大的可訪問性：很多人實際上都會更改瀏覽器的預設字型大小，以方便閱讀文字。通過使用 REM 大小，您的設計可以適應這些使用者的偏好。
當然，這並不全是陽光和彩虹。也有一些缺點：
- 第三方萬用字元：如果你的網站包含嵌入式內容，你可能會發現文字和其他元素並不遵循你的 REM 規則。
- 計算困難：要計算出 1.2rem 究竟有多大，需要一些數學計算。
- 權力越大，責任越大：當你可以如此輕鬆地改變整個網站的文字大小時，你需要謹慎編輯，以避免整個網站的設計災難！
一般來說，大多數專案都應使用 REM。它比 EM 大小更容易處理，結果也更容易預測。
不過，有時 EM 也很有用。
瞭解 EM
EM 是一個棘手的東西。該單元基於其父元素的字型大小–就像變色龍適應周圍環境一樣。
當你開始巢狀時，混亂就開始了。大多數元素都會從父元素那裡繼承預設字型大小。但如果父元素也使用 EM 大小呢？很容易就會出現比例混亂的情況。
下面是一個簡單的例子：
假設你有一個包含 <div> 的頁面。在該框內，我們有一個 <p> 標籤，其中包含一些文字。
<html> <div> <p>Some text here.</p> </div> </html>
現在，看看這個 HTML 程式碼段的 CSS：
html { font-size: 16px; /* Starting default size */ }
div { font-size: 1.2em; /* 19.2px */ }
p { font-size: 1.2em; /* 23.04px */ }
我們首先定義了整個頁面的預設字型大小。到目前為止，一切順利。
接下來，我們規定 <div> 內容的字型大小應為 1.2em。換句話說，我們的文字應該是父元素預設值的 120%。
最後，我們還將 <p> 的字型大小設為 1.2em。
等一下！以畫素為單位，文字大小明顯增大。
這是為什麼呢？
<p> 元素檢視了其父 <div> 的字型大小 19.2px，並將其作為預設大小。因為我們要求的是 1.2em，所以我們得到的文字是預設大小的 120%。
使用 EM 單元時很容易出現這類錯誤。
EM 非常適合特定尺寸
除了缺點之外，EM 單元對於特定元件的大小也非常有用。
假設您想建立一個按鈕，它在父元素中佔據的空間始終大致相同。
您的 HTML 程式碼可能是
<button class='button'>Click Me</button>
要設定按鈕的樣式，您可以使用 EM 單位來設定 font-size 和 padding。
CSS 將如下所示：
.button {
font-size: 1em; /* Size relative to the parent text size */
padding: 0.5em 1em; /* Padding scales with the font size */
}
上面的程式碼為我們提供了一個簡單的按鈕，並在文字周圍加了一點襯墊。
如果父元素的字型大小向上縮放，按鈕的字型大小和填充也會跟著向上縮放。
這樣，即使改變裝置或縮放級別，也能在父元素中保持相同的視覺平衡。
為什麼要使用 EM？
既然有這麼多困惑，為什麼還要使用 EM 呢？
嗯，它確實有一些好處：
- 上下文縮放：元素根據其父元素的大小進行縮放，讓你對整個設計的大小控制更加細緻入微。
- 基於元件的設計：EM 單元非常適合建立獨立的、可重複使用的、保持相同比例的元件。
- 精確控制：您可以在每個文件結構層次上對尺寸進行微調，而無需進行全面更改。
- 反應靈敏：與 REM 一樣，EM 單元可以讓你的設計適應不同的螢幕尺寸和使用者偏好。
正如我們所看到的，它也有一些缺點：
- 複合效應：巢狀元素可能會導致意想不到的尺寸，因為 EM 值會開始疊加。
- 維護難題：更改父元素的字型大小會影響所有子元素，這可能會導致意想不到的後果，例如正文文字過大，標題過小。
- 大型專案的複雜性：隨著專案的增長，跟蹤所有相對大小可能會變得非常具有挑戰性。
總之，EM 對於基於元件的設計以及需要精確控制元素關係時非常有用。它比基於畫素的尺寸更靈活，但需要比 REM 更仔細的規劃。
REM 還是 EM：您應該使用哪一種？
好了，以上就是很多有趣的資訊。不過，如果你正在製作一些東西，你只需要知道該使用哪個 CSS 單元。
以下是我們的結論：
- 對於大多數專案來說，REM 是更好的選擇，因為它更具可擴充套件性，也能提供更好的控制。
- 對於涉及巢狀樣式的特定情況，EM 是一種有價值的工具。
值得注意的是，REM 和 EM 一般都比 px 等絕對單位更適合現代設計。
與視口單位（vh/vw）和百分比（%）等其他相對單位相比，REM 和 EM 也更適用於調整文字大小。
讓我們從鷹眼的角度來看看 REM 與 EM 的對比：
| 特徵 | REM | EM |
| 繼承性 | 與 root 要素保持一致 | 相對於父元素 |
| 可擴充套件性 | 優秀 | 更有限 |
| 複雜性 | 較低，因為一致性 | 由於上下文大小的影響而更高 |
| 可維護性 | 簡單–根元素尺寸的變化是級 | 巢狀元素可能更棘手 |
| 可訪問性 | 與使用者偏好配合良好 | 可能需要調整 |
| 最適合 | 全域性間距和佈局 | 特定元件縮放 |
常見問題解答
本指南應該已經消除了圍繞這兩個非常相似的單位的大部分困惑。
但如果你仍有疑問，這裡有你需要知道的！
響應式設計應該使用 REM 還是 EM？
對於響應式設計來說，REM 通常是更好的選擇，因為它可以讓你建立適應不同螢幕尺寸的一致且可擴充套件的佈局。
唯一的例外是當你想建立離散單元時，所有元素都保持相同的尺寸比例。
使用 EM 單元時如何避免複雜性？
為避免 EM 單元的複雜性，請儘量限制元素的巢狀。在全域性大小調整中使用 REM，而在特定元件內的細微調整中使用 EM。
REM 有推薦的基本字型大小嗎？
雖然沒有嚴格的規定，但 REM 的常用基本字型大小為 16px。不過，您也可以根據自己的設計偏好和可訪問性要求選擇任意值。
深入瞭解 CSS
想進一步瞭解數字設計？我們有大量優秀的 CSS 學習資源：
響應式設計的重要性
正如我們在本指南開頭提到的，CSS 單元是一個經常被忽視的元件。
然而，如果你想建立一個在任何裝置上都美觀大方、適合所有使用者使用的網站或應用程式，那麼考慮設計細節就顯得尤為重要。
REM 還是 EM 的爭論最終並不重要–最重要的是您的網站易於訪問、響應迅速且易於使用！
評論留言