工具簡介

PX 轉(zhuǎn) EM 工具，是一款單位換算工具，可以把 PX 像素值轉(zhuǎn)換成對(duì)應(yīng)的 EM 值；同時(shí)也支持把 EM 轉(zhuǎn)換成 PX 像素值。PX 和 EM 這 2 種單位通常用于網(wǎng)頁設(shè)計(jì)的 CSS 樣式表中，如：字體大小、元素尺寸、內(nèi)外間距等。

使用本工具，需要指定根字體大?。?em>Root Font Size），該大小將作為換算基準(zhǔn)數(shù)據(jù)。假如我們把根字體大小設(shè)為 16px，那么，1em 等于 16px；2em 等于 32px；3.5em 等于 56px...

什么是 EM？

EM 單位是印刷術(shù)領(lǐng)域中的度量單位，等于當(dāng)前字體的大小。正如上面舉的例子，如果您的根字體大小為 16 像素，則 1em = 16px。

像素PX、EM、百分比％和像素點(diǎn)PT之間有什么不同？

首先，像素 PX 和 PT 是靜態(tài)測量值，但通常在不同的場景中使用。因?yàn)槠聊灰韵袼貫閱挝?，所以在屏幕上使用像素。盡管可以在屏幕上使用 PT 作為單位，但由于它們是 DPI 的緣故，因此，PT 通常作為印刷行業(yè)的標(biāo)準(zhǔn)單位。

其次，百分比和 EM 是相對(duì)度量。EM 或百分比單位的大小取決于其父元素。如果正文文本的大小設(shè)置為 12px，則文本大小設(shè)置為 120％ 或 1.2em 的實(shí)際大小為 14.4px（即 1.2 * 12 = 14.4）。

PX、EM、％ 和 PT 之間的轉(zhuǎn)換關(guān)系

注意：以下所有轉(zhuǎn)換均以 16px 用作正文文本大小。

1、PX 轉(zhuǎn) EM

公式：像素大小 / 父像素大小

例如：12px / 16px = .75em

2、PX 轉(zhuǎn)百分比％

公式：像素大小 / 父像素大小 * 100

例如：12px / 16px * 100 = 75％

3、PX 轉(zhuǎn) PT

公式：以像素為單位的尺寸 * (每英寸的點(diǎn)數(shù) / 每英寸的像素?cái)?shù))

例如：16px * (72pt / 96px) = 12pt

4、EM 轉(zhuǎn) PX

公式：以 EM 為單位的尺寸 * 以像素為單位的父尺寸

例如：.75em * 16px = 12px

5、EM 轉(zhuǎn)百分比％

公式：以 EM 為單位的大小 * 100

例如：.75em * 100 = 75％

為什么建議在 CSS 中的使用 EM 作為字體大小的單位？

使用 EM 作為字體大小的單位，對(duì)于設(shè)計(jì)者來說更容易維護(hù)，并且最終用戶更易于訪問。使用 EM 來指定字體大小，只需更改一個(gè)元素的字體大小，其余的都將按比例縮放，避免單獨(dú)更改每個(gè)元素的字體大小。

另外，使用 EM 還能提升頁面的可訪問性和用戶體驗(yàn)，因?yàn)榫W(wǎng)頁中的文本是根據(jù)比例進(jìn)行縮放的，而不是以像素 PX 為單位來設(shè)置一個(gè)固定值，這樣，在不同的屏幕尺寸下，EM 有更好的屏幕適應(yīng)性。