首页·CSS 单位

px 换 rem — 120 种尺寸的 CSS 单位表

16px 就是 1rem,也是 12pt。1 到 120px 的每个尺寸,rem、pt、pc、英寸与毫米一行列齐。

最常用的尺寸

正文 16、小字 14、间距 8/24/32——这些是反复出现的数值。

pxrem(基准 16px)pt(磅)
8px0.5rem6pt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
28px1.75rem21pt
32px2rem24pt
36px2.25rem27pt
40px2.5rem30pt
48px3rem36pt
56px3.5rem42pt
64px4rem48pt
72px4.5rem54pt
80px5rem60pt
96px6rem72pt

rem 为什么除以 16

因为浏览器默认根字号是 16px,而 rem 是它的倍数。读者在浏览器里调大字号时,只有用 rem 写的部分会跟着变大,写死成 px 的地方纹丝不动。

屏幕上 pt 与英寸也是按像素定的

CSS 规定 1 英寸等于 96px,1pt 等于 1/72 英寸。所以 16px 正好是 12pt——但把尺子贴到屏幕上,那个“英寸”并不是真的一英寸。

能整除的尺寸

rem 在 16 的倍数上是整数,pt 在 4 的倍数上是整数——因为 4px 正好是 3pt。

从 1px 到 120px

怎么看这一页

  • rem = px ÷ 16,因为浏览器默认根字号是 16px。
  • pt = px × 0.75,因为 CSS 规定 1 英寸 = 96px、1pt = 1/72 英寸。
  • 1pc 等于 12pt,1 英寸既是 96px 也是 72pt。
  • 文字和间距用 rem,边框这类要细的线保留 px。

常见问题

Q. 1rem 是多少 px?

默认是 16px。如果读者在浏览器里调大了字号,rem 会跟着变大——这正是使用 rem 的理由。

Q. 该写 px 还是 rem?

文字和间距用 rem 更好,读者放大字号时会一起变大;1px 边框这类要细的线保留 px。

Q. 为什么有人给 html 设 font-size: 62.5%?

这样根字号变成 10px,1.6rem 就是 16px,算起来方便。代价是:特意调大过默认字号的人,看到的页面反而变小了。

Q. pt 为什么还在用?

它来自印刷,留在打印样式表和邮件模板里。在屏幕上换算很干净:16px 就是 12pt。

Q. em 和 rem 有什么区别?

rem 始终以根字号为基准,em 以元素自身的字号为基准,所以嵌套的 em 会层层相乘。