px 换 rem — 120 种尺寸的 CSS 单位表
16px 就是 1rem,也是 12pt。1 到 120px 的每个尺寸,rem、pt、pc、英寸与毫米一行列齐。
最常用的尺寸
正文 16、小字 14、间距 8/24/32——这些是反复出现的数值。
| px | rem(基准 16px) | pt(磅) |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 56px | 3.5rem | 42pt |
| 64px | 4rem | 48pt |
| 72px | 4.5rem | 54pt |
| 80px | 5rem | 60pt |
| 96px | 6rem | 72pt |
rem 为什么除以 16
因为浏览器默认根字号是 16px,而 rem 是它的倍数。读者在浏览器里调大字号时,只有用 rem 写的部分会跟着变大,写死成 px 的地方纹丝不动。
屏幕上 pt 与英寸也是按像素定的
CSS 规定 1 英寸等于 96px,1pt 等于 1/72 英寸。所以 16px 正好是 12pt——但把尺子贴到屏幕上,那个“英寸”并不是真的一英寸。
能整除的尺寸
rem 在 16 的倍数上是整数,pt 在 4 的倍数上是整数——因为 4px 正好是 3pt。
16px = 1rem32px = 2rem48px = 3rem64px = 4rem80px = 5rem96px = 6rem112px = 7rem128px = 8rem144px = 9rem
从 1px 到 120px
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
怎么看这一页
- rem = px ÷ 16,因为浏览器默认根字号是 16px。
- pt = px × 0.75,因为 CSS 规定 1 英寸 = 96px、1pt = 1/72 英寸。
- 1pc 等于 12pt,1 英寸既是 96px 也是 72pt。
- 文字和间距用 rem,边框这类要细的线保留 px。
常见问题
Q1rem 是多少 px?
默认是 16px。如果读者在浏览器里调大了字号,rem 会跟着变大——这正是使用 rem 的理由。
Q该写 px 还是 rem?
文字和间距用 rem 更好,读者放大字号时会一起变大;1px 边框这类要细的线保留 px。
Q为什么有人给 html 设 font-size: 62.5%?
这样根字号变成 10px,1.6rem 就是 16px,算起来方便。代价是:特意调大过默认字号的人,看到的页面反而变小了。
Qpt 为什么还在用?
它来自印刷,留在打印样式表和邮件模板里。在屏幕上换算很干净:16px 就是 12pt。
Qem 和 rem 有什么区别?
rem 始终以根字号为基准,em 以元素自身的字号为基准,所以嵌套的 em 会层层相乘。