研究背景

一般用于描述 font-size、padding 或者 border 的长度都使用 px 单位。但最近看到也有很多使用 em 单位的，为了弄清楚，有必要总结一下不同长度单位的用法。

内容

当前出现的一般有以下几种长度单位：

• 绝对长度：

• px
• in
• pt
• cm

• 相对长度：

• em
• rem
• %

绝对值

in

inches (1in = 96px = 2.54cm)

px

pixels (1px = 1/96th of 1in)

在这里值得一提的是 pixel 在不同的语境下有不同的含义，例如 css pixel 或者 device pixel。这里特指 css pixel。

pt

points (1pt = 1/72 of 1in)

cm

centimeters

相对值

em

相对于元素的 font-size 的值 （2em 表示当前 font-size 的2倍）

rem

相对于根元素的 font-size 的值

使用说明

最早的单位是 px 和 %，后来应该是为了解决缩放的问题引入了 em。又因为 em 单位是相对于父元素的 font-size，如果两个相同的元素做了嵌套，真正的字体大小可能还不一样，为了解决这个混乱，引入了相对于根元素的 rem。不过看了这么多网站，好像当前使用 em/rem 的不是很多。当前暂时就先用 px 吧。

em 用法

如果要使用 em 的话，因为浏览器默认字体大小是 16px，为了避免计算出来小数，一般都会提前设置 body 元素的 font-size 大小是 10px，即 62.5%。

body{ font-size:62.5%; }

参考资料

• MDN
• W3C
• px、em 和 rem 的区别