CSS - 长度单位
2017-01-13 本文已影响32人
onizuka_jp
研究背景
一般用于描述 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%; }
