CSS中em單位和rem單位的計算方式區別

在css中，em和rem的區別在于計算基準：em基于當前元素字體大小，rem基于根元素字體大小。具體來說：1. em的計算取決于當前元素自身字體大小，若未設置則繼承父級，適用于局部比例控制但易受嵌套影響；2. rem始終以根元素（html）字體大小為基準，適合全局統一尺寸和響應式布局；3. 使用建議：局部縮放或組件內部使用em，全局控制和響應式設計使用rem，合理選擇可提升布局靈活性與一致性。

在css中，em和rem都是相對單位，但它們的計算基準不同，導致使用場景和效果也有所區別。簡單來說：

• em是相對于當前元素的字體大小來計算的；
• rem是相對于根元素（通常是html）的字體大小來計算的。

了解它們的區別，能幫助你在布局時更靈活地控制尺寸，避免層級嵌套帶來的意外放大或縮小問題。

一、em 是怎么算的？

em的計算方式依賴于當前元素自身的font-size值。如果當前元素沒有顯式設置字體大小，它會繼承父元素的字體大小作為基準。

立即學習“前端免費學習筆記（深入）”；

舉個例子：

.parent {   font-size: 20px; }  .child {   font-size: 1.5em; /* 計算為 20px * 1.5 = 30px */ }

但如果子元素自己設置了字體大小，那它的em就基于自己的字體大小來計算了。比如：

.child {   font-size: 16px;   padding: 1em; /* 這里的1em就是16px */ }

注意點：

• 在嵌套結構中，每一層都用em的話，可能會層層放大（或縮小），容易出錯。
• 使用時要特別注意當前元素的字體大小來源。

二、rem 的計算邏輯更穩定

rem的“r”代表“root”，也就是根元素。無論你在哪里使用rem，它始終以標簽上設置的字體大小為基準。

通常我們會這樣設置：

html {   font-size: 16px; }  .box {   font-size: 1.25rem; /* 16px * 1.25 = 20px */ }

即使.box被嵌套多深，只要根元素的字體大小不變，它的1.25rem永遠是20px。

優點：

• 避免了em可能帶來的嵌套級聯問題；
• 更適合用于響應式設計，比如通過JavaScript動態調整根字號來適配屏幕。

三、什么時候用 em，什么時候用 rem？

這個問題其實取決于你的需求：

• 用 em 的情況：

  • 希望某個元素的尺寸跟隨自身字體大小變化；
  • 某些組件內部樣式希望與字體大小保持比例關系；
  • 需要更精細地控制局部縮放（比如按鈕、圖標等）；

• 用 rem 的情況：

  • 全局統一的尺寸控制；
  • 構建響應式布局；
  • 避免嵌套帶來的尺寸混亂；

一個常見做法是：

• 用rem設定全局基礎尺寸（如字體、間距、容器寬高）；
• 用em處理組件內部細節（如padding、margin、行高等）；

基本上就這些。理解清楚兩者的基準差異，再根據實際項目需要選擇合適的單位，就能更自如地掌控頁面的視覺一致性。

以上就是CSS中em單位和rem單位的計算方式