px 换 rem — 120 种尺寸的 CSS 单位表
16px 就是 1rem,也是 12pt。1 到 120px 的每个尺寸,rem、pt、pc、英寸与毫米一行列齐。
最常用的尺寸
正文 16、小字 14、间距 8/24/32——这些是反复出现的数值。
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 会层层相乘。