CSS單位轉換器 — px, rem, em, pt, % 線上工具

輸入任意CSS值（px、rem、em、pt或%），立即查看其他所有單位的等效值。設定自訂基礎字體大小（預設16px）以精確轉換rem和em。所有計算即時更新，不需重新整理頁面。

數值

基礎字體大小（px）

通常為16px（瀏覽器預設值）

rem1 rem

em1 em

pt12 pt

%100 %

基礎：16px。對於rem/em，1單位 = 根層級16px。

運作原理

CSS單位對響應式設計的重要性

CSS提供兩大類長度單位：絕對單位（px、pt、cm、mm）和相對單位（rem、em、%、vw、vh）。絕對單位無論上下文如何都有固定的實體尺寸；相對單位則相對於某個參照物進行縮放——根字體大小、父元素字體大小或視口尺寸。選擇適當的單位類型決定了版面能否優雅地適應不同螢幕尺寸、使用者字體偏好和縮放級別。

像素（px）依然是最常見的CSS單位，因為其可預測且精確，但它不尊重使用者的瀏覽器字體大小設定。將預設字體大小增大到20px以滿足無障礙需求的使用者會發現px文字保持不變，而rem文字則會相應放大。這就是為什麼WCAG 2.1成功標準1.4.4（調整文字大小）使用rem等相對單位設定字體大小最容易滿足的原因。

px vs rem vs em：各自的使用時機

rem（根em）相對於根元素的字體大小——在所有瀏覽器中預設為16px。由於rem錨定在一個固定的參考點（<html>元素），避免了em的複合效應。使用rem設定字體大小、元件間距，以及任何應隨使用者字體偏好縮放的值。典型公式：rem = px ÷ base，如24px ÷ 16 = 1.5rem。

em相對於目前元素的字體大小，而該大小本身可能以em設定——形成複合鏈。在`font-size: 1.2em`的父元素內的子元素設定`font-size: 1.2em`，結果是根字體大小的1.44倍（1.2×1.2）。這使em適合用於應隨局部字體大小縮放的間距（元件內的padding和margin），但全域版面配置難以預測。pt（點）主要用於列印設計：1pt = 1/72英寸，72pt = 1英寸 ≈ 螢幕上96px。

選擇基礎字體大小與設計系統的配合

大多數瀏覽器根字體大小預設為16px，這就是為什麼預設轉換器設定中1rem = 16px。部分開發者設定`html { font-size: 62.5%; }`使1rem = 10px，簡化心算（24px = 2.4rem而非1.5rem）。這個技巧存在爭議，因為需要在所有地方重設字體大小，且可能與無障礙偏好衝突。

現代設計系統（Material Design、Apple HIG、Tailwind CSS）對間距和排版使用模組化比例——通常是4px或8px的倍數。在這些單位中工作並轉換為rem，可確保不同上下文中視覺節奏的一致性。Tailwind的預設比例例如使用4px = 1單位，因此值4（16px）等於1rem。如有疑問，將基礎保持在16px，使用本轉換器取得精確的rem值，無需心算。

常見問題

›如何將px轉換為rem？

用像素值除以根字體大小。預設16px基礎：rem = px ÷ 16。因此24px = 1.5rem，32px = 2rem，48px = 3rem。如果根字體大小是10px（來自`html { font-size: 62.5%; }`），則rem = px ÷ 10。

›瀏覽器預設字體大小是多少？

所有主流瀏覽器的根字體大小預設為16px，除非使用者更改了偏好設定。這意味著在預設設定中1rem = 16px。部分使用者為了無障礙會增大此值——這是使用rem而非px設定文字的關鍵原因。

›rem和em有什麼區別？

rem始終相對於根元素（<html>）字體大小，因此可預測。em相對於目前元素的字體大小，可能透過繼承而變化。全域值（本文字體大小、頁面版面）使用rem，應隨局部上下文縮放的值（相對於元素自身字體大小的padding）使用em。

›1rem等於多少像素？

預設情況下1rem = 16px。設定`html { font-size: 20px }`後1rem = 20px。設定`html { font-size: 62.5% }`（相對於預設16px）後1rem = 10px。本轉換器中的基礎欄位可讓您更改假定的根字體大小。

›字體大小應該用rem還是px？

盡可能使用rem設定字體大小。基於rem的文字尊重使用者的瀏覽器字體大小偏好，這對無障礙很重要。像素會忽略瀏覽器設定，這意味著需要更大文字的使用者無法受益於縮放（瀏覽器縮放引入之前）。

›如何將px轉換為pt？

1磅 = 1/72英寸 = 螢幕上1.333像素。轉換公式：pt = px × 0.75。因此16px = 12pt。磅主要用於列印CSS和針對PDF或列印樣式表等實體媒體時。

›CSS單位中的%代表什麼？

CSS中的百分比取決於上下文。對於font-size，100% = 繼承的字體大小（與1em相同）。對於width/height，100% = 包含區塊的大小。在本轉換器中，我們將%視為基礎字體大小的百分比，因此100% = 基礎px，150% = 1.5×基礎。

›什麼是62.5%技巧？

設定`html { font-size: 62.5%; }`使1rem = 10px（因為預設16px的62.5% = 10px）。這簡化了rem計算：24px變為2.4rem而非1.5rem。但這需要在整個CSS中重設字體大小，可能會破壞第三方元件。現代設計令牌和工具使這個技巧變得不那麼必要。