css中的单位

前端开发中, 做适配是少不了的, 即页面在各种尺寸的机型中显示效果一样, 这就用到了css中的各种长度单位, 做一下总结

在css中, 长度单位分为以下几种

• 绝对单位: px、in、cm、mm、pt、pc
• 百分比单位: vw、vh、vmin、vmax、%
• 相对单位: em、rem、ex、ch

各单位的介绍

px

不用过多介绍, 精确像素

in

寸

cm

厘米

mm

毫米

pt

大约1/72寸

pc

大约1/6寸

vw

以窗口宽度为参照, 1vw为窗口宽度的1%

vh

窗口高度为参照, 1vh为窗口高度的1%

vmin

窗口的宽度和高度中较小的一个为参照,百分比

vmax

窗口的宽度和高度中较大的一个为参照, 百分比

%

以父节点为基准的百分比

em

以父节点字体大小为基准值, 父节点字体大小为20px, 则1.5em为30px

rem

以根节点字体大小为基准值, 及HTML标签的字体大小

ex

当前字体x的高度为基准, 无法确定时为0.5em

ch

以当前字体0字符为基准值, 无法确定时为0.5em