PXtoEM转换工具,在线直接转轻松转换PX 到 EM

选择你的页面的字体大小

转换基于浏览器默认的16px字体大小

Pixels EMs Percent Points
6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.500em 50.0% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.750em 75.0% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1.000em 100.0% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.250em 125.0% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.500em 150.0% 18pt

转换结果

基于你的页面字体大小的转换

Pixels EMs Percent Points
6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.500em 50.0% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.750em 75.0% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1.000em 100.0% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.250em 125.0% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.500em 150.0% 18pt

自定义转换

Here’s a calculator for your custom EM needs

1. 输入基本的像素大小

px

2. 转换

PX to EM
px
or
EM to PX
em
开始转换

3. 转换结果

Pixels, EMs, and relative units… oh my!

Daunting, but not quite lions, tigers, and bears thanks to PXtoEM.com

What is an EM?

Wikipedia puts it well: "An em is a unit of measurement in the field of typography, equal to the size of the current font." If your font-size is at 16 pixels, then 1em = 16px

For more information visit Wikipedia and Mozilla MDN.

What is the text sizing difference between PX, EM, %, PT?

Pixels and points are static measurements, but commonly used in different mediums. Pixels are used on screens because screens are measured in pixels. Although points can be used on screen, they are the standard in printing because they are a factor of DPI.

Percent and EMs on the other hand are relative measurements. The size of an EM or percentage unit depends on its parent. If body text is sized at 12 pixels, then text set at 120% or 1.2 EM inside the body will be 1.2 * 12, or 14.4 pixels.

How do I convert between PX, EM, %, and PT?

Assuming you aren’t using PXtoEM.com to keep it simple, here are the formulas PXtoEM.com uses.

Note: 16px is used as the body text size in all conversions because that is the browser default. You will change 16px to your base text size.

PX to EM
Formula: size in pixels / parent size in pixels
Example: 12px / 16px = .75em
PX to %
Formula: size in pixels / parent size in pixels * 100
Example: 12px / 16px * 100 = 75%
PX to PT
Formula: size in pixels * (points per inch / pixels per inch)
Example: 16px * (72pt / 96px) = 12pt
EM to PX
Formula: size in EMs * parent size in pixels
Example: .75em * 16px = 12px
EM to %
Formula: size in EMs * 100
Example: .75em * 100 = 75%

Why size your text with EMs in CSS?

Style sheets that use EMs are easier to maintain for the designer (especially with PXtoEM.com at your side) and more accessible to end-users.

Style sheets become easier to maintain because all text set in EMs scale to the body font-size. Only one element\'s font-size needs to change instead of individually changing the font-size of each element.

Accessibility is increased for end-users because text is scaled based on their preferences rather than set statically in pixels. Additionally, end-users can use hot keys to scale the text in all browsers. Many people have difficulty reading small text on a computer screen.

For more information visit Yunnan.ws