魯斯前端布魯斯前端

文章中英模式

布魯斯前端面試題目 - px vs rem vs em 詳解

深入了解CSS中px、rem和em單位的差異、使用場景與響應式設計實踐，掌握現代網頁開發中各種長度單位的精確應用。

影片縮圖

懶得看文章？那就來看影片吧

CSS長度單位的基本概念

CSS提供了多種設置元素尺寸的單位，它們可以分為絕對單位（如px）和相對單位（如em、rem、%）。理解這些單位的特性及適用場景，對於創建響應式且可訪問的網頁至關重要。

本文將重點介紹三種最常用的長度單位：px、em和rem，它們的差異以及各自的優缺點。

像素（px）- 固定的絕對單位

像素（px）是CSS中最基本的絕對單位，表示螢幕上的一個物理顯示點。

px特性

  • 1. 固定大小，不受外部因素影響
  • 2. 1px在不同的螢幕密度下可能有不同的實際大小
  • 3. 不隨用戶設置的字體大小變化
  • 4. 精確控制元素大小
.button {
  width: 200px;    
  height: 50px;    
  font-size: 16px; 
  padding: 10px;   
  border-radius: 4px; 
}

px的優點

  • 1. 精確控制元素尺寸
  • 2. 穩定且可預測的表現
  • 3. 適合需要像素級別精確的設計
  • 4. 直觀易懂，數值即視覺大小

px的缺點

  • 1. 缺乏響應式特性，不隨視窗變化
  • 2. 不隨用戶的字體大小設置變化
  • 3. 在高DPI螢幕可能呈現不一致
  • 4. 不利於實現無障礙設計

em - 相對於父元素的單位

em是一種相對單位，相對於元素的父元素的字體大小。1em等於父元素的字體大小。

em特性

  • 1. 相對於父元素的字體大小
  • 2. 具有繼承性和級聯效果
  • 3. 可用於創建比例關係的設計
  • 4. 在嵌套元素中會產生複合效果
body {
  font-size: 16px; /* 基準字體大小 */
}

.parent {
  font-size: 20px; /* 新的基準 */
}

.child {
  font-size: 1.5em;  /* = 20px * 1.5 = 30px */
  margin: 1em;       /* = 30px * 1 = 30px (因為margin相對於自身字體大小) */
}

.grandchild {
  font-size: 1.5em;  /* = 30px * 1.5 = 45px (注意這裡的複合效果) */
}

em的優點

  • 1. 能創建比例一致的設計
  • 2. 適合定義元素內部的相對尺寸
  • 3. 在元素縮放時保持內部比例
  • 4. 可以根據父元素調整大小

em的缺點

  • 1. 複合效應可能導致難以預測的結果
  • 2. 嵌套元素的尺寸計算複雜
  • 3. 需要謹慎管理繼承關係
  • 4. 不易於全局一致的響應式設計

rem - 相對於根元素的單位

rem（root em）是相對於根元素（html）的字體大小的單位。1rem等於根元素的字體大小。

rem特性

  • 1. 相對於根元素的字體大小
  • 2. 不受元素嵌套層級的影響
  • 3. 便於全局控制網站的比例
  • 4. 簡化響應式設計的實現
html {
  font-size: 16px; /* 根元素字體大小 */
}

@media (max-width: 768px) {
  html {
    font-size: 14px; /* 小螢幕上調整根字體大小 */
  }
}

.title {
  font-size: 2rem;   /* = 16px * 2 = 32px (在大螢幕) */
                     /* = 14px * 2 = 28px (在小螢幕) */
}

.container {
  width: 50rem;      /* = 16px * 50 = 800px (在大螢幕) */
                     /* = 14px * 50 = 700px (在小螢幕) */
  padding: 1.5rem;   /* = 16px * 1.5 = 24px (在大螢幕) */
                     /* = 14px * 1.5 = 21px (在小螢幕) */
}

rem的優點

  • 1. 易於全局控制所有元素的比例
  • 2. 不受嵌套影響，計算簡單
  • 3. 非常適合響應式網站設計
  • 4. 支持用戶自訂字體大小的無障礙設計

rem的缺點

  • 1. 不能基於父元素創建局部比例關係
  • 2. IE8及以下瀏覽器不支持
  • 3. 過度依賴於根元素設置
  • 4. 可能需要JavaScript輔助實現高級響應式行為

單位對比：何時使用px、em還是rem？

單位適用場景優勢
px邊框、陰影、一像素線條精確控制視覺元素
媒體查詢斷點基於設備尺寸的精確值
小型裝飾元素不需隨字體變化的元素
rem字體大小全站一致縮放，支持用戶自訂
按鈕、輸入框保持表單元素一致響應
容器尺寸、間距整體佈局響應式調整
em元素內部間距與元素字體大小成比例
圖標、局部元素與周圍文本保持比例關係

最佳實踐是混合使用這些單位，針對不同的元素和目的選擇最合適的單位。現代網頁設計中，常見的方法是：

  • 1. 使用rem作為全局比例的基礎（字體大小、間距、容器尺寸）
  • 2. 使用em處理與特定元素字體相關的排版細節
  • 3. 使用px處理需要精確控制的小元素和視覺細節
  • 4. 使用%處理響應式佈局的寬度和彈性元素

使用rem實現響應式設計

rem單位在響應式設計中特別有用，因為通過改變根元素的字體大小，我們可以同時按比例調整整個網站的元素大小。

/* 基於視窗寬度動態設置根字體大小 */
html {
  /* 默認字體大小 */
  font-size: 16px;
}

/* 平板設備 */
@media (max-width: 992px) {
  html {
    font-size: 15px;
  }
}

/* 手機設備 */
@media (max-width: 576px) {
  html {
    font-size: 14px;
  }
}

/* 或使用vw單位使字體大小流暢縮放 */
html {
  /* 基準為16px（在視窗寬度為1000px時） */
  font-size: calc(14px + 0.2vw);
}

/* 然後所有使用rem的元素都會自動響應 */
.container {
  width: 70rem; /* 會隨根字體大小變化 */
  padding: 2rem;
}

.heading {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

🔥 常見面試題目

(一) 解釋px、em和rem之間的主要區別

答：px、em和rem的主要區別在於它們的參考基準：

  • px（像素） 是絕對單位，表示螢幕上的一個物理點。1px始終是固定大小，不受任何元素的字體大小影響。
  • em 是相對單位，相對於當前元素的父元素的字體大小。例如，如果父元素的字體大小是16px，那麼子元素的1em就等於16px。em具有繼承性，在嵌套元素中會產生複合效果。
  • rem 是相對單位，相對於根元素（html）的字體大小。所有的rem值都統一參考根元素字體大小，不受元素嵌套的影響。比如，如果html的字體大小是16px，那麼1rem就等於16px，無論這個元素在文檔中的嵌套位置如何。

這些區別決定了它們的適用場景：px適合精確控制，em適合元素內部的比例關係，rem適合全局一致的響應式設計。

(二) em和rem在嵌套元素中的表現有何不同？

答：em和rem在嵌套元素中的主要區別是：

em單位會產生複合效應：

/* 假設body的字體大小是16px */
.parent {
  font-size: 1.5em; /* = 16px * 1.5 = 24px */
}

.child {
  font-size: 1.5em; /* = 24px * 1.5 = 36px */
}

.grandchild {
  font-size: 1.5em; /* = 36px * 1.5 = 54px */
}

rem單位不受嵌套影響，始終參考根元素大小：

/* 假設html的字體大小是16px */
.parent {
  font-size: 1.5rem; /* = 16px * 1.5 = 24px */
}

.child {
  font-size: 1.5rem; /* = 16px * 1.5 = 24px (仍然參考根元素) */
}

.grandchild {
  font-size: 1.5rem; /* = 16px * 1.5 = 24px (仍然參考根元素) */
}

這種差異使rem更適合全局一致的大小控制，而em適合在特定元素內部創建比例關係。比如，可以用rem設置全局字體大小，用em設置段落內的標題、列表等元素，使它們與周圍內容保持一致比例。

(三) 為什麼在響應式設計中rem單位比px更受推薦？

答：在響應式設計中，rem單位比px更受推薦，原因如下：

優勢說明
全局比例縮放通過僅改變根元素字體大小，網頁上所有使用rem的元素都會成比例調整，簡化媒體查詢
無障礙性支持尊重用戶的字體大小設置，對有視力障礙的用戶更友好
維護性更容易維護比例一致的設計系統，因為所有尺寸都基於同一個參考值
設備適配性更容易適應不同尺寸的設備，不需要為每個元素單獨設置斷點
流暢的縮放結合vw等單位設置html的字體大小，可以實現元素尺寸隨視窗大小流暢縮放

實際開發中，常見的模式是使用rem設置布局尺寸和文本大小，然後使用媒體查詢調整根字體大小，從而一次性調整整個頁面的比例。這比使用px單獨調整每個元素更高效且一致。