CSS - 畫素 (PX) 到 EM 轉換

這個簡單的線上畫素 (PX) 值到 EM 單位轉換工具可以計算出畫素到 EM 值的精確值，從而實現更好的 CSS 縮放和可訪問性。在 CSS 中，畫素和 em 是用於定義元素尺寸、字型和佈局結構大小的單位。

• 畫素 (px) 是一個固定的測量單位，表示螢幕上點的確切數量。它不會適應頁面上的其他元素或使用者顯示設定。
• EM 單位 (em) 是相對於元素或其父元素字型大小的相對單位。它用於響應式和靈活的佈局。一個 em 單位等於當前字型大小。

畫素到 EM 轉換公式

以下是將畫素轉換為 em 的公式。

em = px / font-size

例如，如果基本字型大小為 16px，則將元素設定為 1.5 em 將使其為 24px (1.5 * 16)。這樣，em 單位可以確保響應性。

畫素到 EM 轉換器

以下是一個用於將畫素轉換為 em 以及反向轉換的數字轉換器。

注意：預設字型大小為16px。因此，在將 px 轉換為 em 時，您需要選擇畫素的基本值（預設為 16）並在公式中使用它進行計算。

使用 EM 單位的好處

• 響應式縮放：EM 單位基於父元素的字型大小，因此對基本字型大小的任何調整都會自動調整所有基於 em 的元素的大小。
• 一致的比例：當我們以 em 單位設定整個佈局時，更改基本字型會按比例調整頁面中的所有尺寸。
• 使用者可訪問性：一些視力障礙的使用者可能會在瀏覽器設定中增加字型大小以提高可見性，在這種情況下，我們以 em 單位定義的佈局也會相應地縮放。

要了解有關 CSS 中單位的資訊，請檢視關於CSS 測量單位的文章。

CSS PX 到 EM 轉換表

下表顯示了 px 值對應的 em 值，假設基本畫素值為 16px。