【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 的对比（仅供参考）
网友评论