CalcOpenly
简体中文

CSS 单位换算器（px 换算为 rem、em、pt）

根据根元素字号、父元素字号和 DPI，将 px 换算为 rem、em、pt、派卡、英寸和 mm。CSS 规定 1 in = 96 px = 72 pt。

更新于 已验证的示例：7

px
更多选项
px
DPI
CSS fixes 1 in = 96 px. Enter a screen or printer density (e.g. 300) to count physical pixels instead.
试一试
转换后的数值
rem
转换后的数值: 1.5 rem
有效数字：10；取最近值，等距时远离零
As CSS
1.5rem
In pixels
24px

24px is 1.5rem with a 16 px root font and 96 pixels per inch.

Size in pixels next to the font sizes

24px24 px1 rem (root)16 px1 em (parent)16 px
24px in every unit 行数：10
单位数值定义
Pixels (px)24px1 px
Points (pt)18pt1 pt = 1/72 in
Picas (pc)1.5pc1 pc = 12 pt = 1/6 in
Inches (in)0.25in1 in = DPI px
Centimetres (cm)0.635cm1 cm = 1/2.54 in
Millimetres (mm)6.35mm1 mm = 1/25.4 in
Quarter-millimetres (Q)25.4Q1 Q = 0.25 mm
em (parent font size)1.5em1 em = parent font size
rem (root font size)1.5rem1 rem = root font size
Percent of parent font size (%)150%100% = parent font size
计算方法 S

  1. Pixels in one px

    1 px=1 px1\,\text{px} = 1\ \text{px}

    1 px

  2. Value in pixels

    24×1=24 px24 \times 1 = 24\ \text{px}

  3. Divide by pixels in one rem

    2416=1.5 rem\frac{24}{16} = 1.5\ \text{rem}

    1 rem = root font size

关于CSS 单位换算器（px 换算为 rem、em、pt）

CSS converts every length through pixels. The absolute units are fixed to each other: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc, and 1 Q is a quarter of a millimetre. The font-relative units depend on the page: 1 rem is the root element's font size, and when you set font-size, 1 em (or 100%) is the parent's font size. The converter turns the value into pixels, then divides by the pixels in one target unit.

Front-end developers use it to turn a design's pixel sizes into rem, so text follows the reader's browser font setting: with the default 16 px root, 24 px is 1.5 rem. Print designers use the pixels-per-inch field instead; at 300 DPI a 10 mm logo needs about 118 pixels.

On screens a CSS inch is not a measured inch. Browsers anchor 96 px to a reference pixel of about 0.0213° of visual angle, so physical units match a ruler only in print.

计算示例

24 px in rem

数值
24
从
Pixels (px)
到
rem (root font size)
Root font size (for rem)
16 px
转换后的数值
1.5 rem
As CSS
1.5rem
In pixels
24 px

核验来源：CSS Values 3 §6.1: 1rem = root font size (16 px browser default); 24 / 16 = 1.5

12 pt in px

数值
12
从
Points (pt)
到
Pixels (px)
Root font size (for rem)
16 px
转换后的数值
16 px
As CSS
16px

核验来源：CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16

1 inch in CSS pixels

数值
1
从
英寸 (in)
到
Pixels (px)
Root font size (for rem)
16 px
转换后的数值
96 px

核验来源：CSS Values 3 §6.2: 1in = 96px

1.5 rem in px

数值
1.5
从
rem (root font size)
到
Pixels (px)
Root font size (for rem)
16 px
转换后的数值
24 px

核验来源：1 rem = root font size (16 px); 1.5 × 16

常见问题

How many pixels is 1 rem?

16 pixels by default. One rem equals the font size of the root html element, and the major browsers set that to 16 px unless the reader changes the default font size or the stylesheet sets html { font-size }. Setting html { font-size: 62.5% } makes 1 rem = 10 px. The W3C CSS Values and Units specification defines rem; the 16 px figure is the browser default, not part of the specification.

How do I convert px to pt?

Multiply pixels by 0.75; to go from points to pixels, multiply by 4/3 (about 1.333). Both factors follow from the W3C CSS rule 1 in = 96 px = 72 pt, so 1 px = 72/96 pt. Body text at 16 px is 12 pt, and 11 pt text from a word processor is about 14.67 px.

What is the difference between em and rem?

rem always refers to the root element's font size; em refers to the current element's font size, or to the parent's when used on font-size itself. So em compounds when nested: a list set to 1.2em inside another list set to 1.2em has text 1.44 times the outer size, while 1.2rem stays at 19.2 px with a 16 px root however deep it sits.

Should I use px or rem for font sizes?

Use rem if text should follow the reader's browser font-size setting. Page zoom enlarges px and rem alike, but the default font-size preference changes only rem, em and percentage sizes. WCAG 2.1 success criterion 1.4.4 (level AA) requires text that can be resized to 200% without loss of content or function; browser zoom can meet it with px, and rem also honours the font-size preference.

Is a CSS inch the same as a real inch?

Only in print. CSS defines 1 in as exactly 96 px, and on screens browsers anchor the pixel to the W3C reference pixel: one pixel of a 96 DPI screen seen from 28 in away, a visual angle of about 0.0213°. Phones are held closer and use smaller pixels, so a 96 px box measures well under an inch on most phones. Printers anchor to physical units, so 1 in prints as 25.4 mm.

“CSS 单位换算器（px 换算为 rem、em、pt）”有多准确？

准确性取决于输入值和方法的假设。十进制运算使用50位有效数字，但估算、数值方法和源数据的精度可能较低；显示时的舍入并不能消除这些限制。 已按独立来源核验的计算示例：7。 例如，“24 px in rem”根据CSS Values 3 §6.1: 1rem = root font size (16 px browser default); 24 / 16 = 1.5进行核验。

这种方法出自哪里？

W3C — CSS Values and Units Module Level 3, §6.2 absolute lengths and §6.1 font-relative lengths.

关于此计算器

to=value×px per from-unitpx per to-unit1 in=96 px=72 pt=2.54 cm\begin{gathered} \text{to} = \text{value} \times \frac{\text{px per from-unit}}{\text{px per to-unit}} \\ 1\,\text{in} = 96\,\text{px} = 72\,\text{pt} = 2.54\,\text{cm} \end{gathered}

来源

  1. W3C — CSS Values and Units Module Level 3, §6.2 absolute lengths and §6.1 font-relative lengths

已对照来源验证

此计算器包含 7 个已解示例，答案来自独立来源。这些示例会在测试套件中运行，你也可以在此运行验证。

相关计算器