一次看够「CSS 单位」

【2018/2/27更新】
提供一个直观效果工具，包含代码实现。 各单位对比效果

---

# px

绝对单位，页面按精确像素展示
【注】也有认为是相对单位，相对于显示器屏幕分辨率而言的。譬如，windows的用户所使用的分辨率一般是96像素/英寸。而mac的用户所使用的分辨率一般是72像素/英寸。

# em

相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值

# rem

相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持

# %

百分比，占最近父元素的百分比大小

# vw

viewpoint width，视窗宽度，1vw等于视窗宽度的1%

# vh

viewpoint height，视窗高度，1vh等于视窗高度的1%

# vmin

vw和vh中较小的那个

# vmax

vw和vh中较大的那个

# in 

绝对单位，寸 / 英寸（大致情况如下）

in 与 px 的对比

# cm

绝对单位，厘米 （大致情况如下）

cm 与px 的对比

# mm

绝对单位，毫米 （情况如下）

mm 与 px 的对比

# pt

点(Point)，绝对长度单位。大约1/72寸  （10pt 大约为 13px）

pt 与 px 的对比

# pc

派卡(Pica)，绝对长度单位。1in = 2.54cm = 25.4 mm = 72pt = 6pc

pc 与 px 的对比

# ex

取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算。(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

ex 与 px 的效果对比（仅供参考）

# ch

以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

ch 与 px 的对比（仅供参考）