CSS 常用单位汇总

绝对长度单位

• px

px，pixel，像素。是显示屏上显示的每一个小点，为显示的最小单位。

• pt

磅，1pt = 1/72 英寸

• in

英寸，1in = 96px

• cm

厘米，1cm = 37.8px

• mm

毫米，1mm = 3.78px

---

相对长度单位

• 百分比（%）

是一个相对长度单位，描述的是相对于父元素的百分比值。

• em

em，相对于当前对象内文本的字体大小。
如，body的font-size设置为12px，则对于body内部的子元素而言，1em = 12px。

但是要注意一点，em的大小依据于父元素的字体大小。当存在多层元素嵌套时，每一个div都将从父元素继承字体大小，并逐层增加。

• rem

rem，"r"="root"，意思是1rem等于root元素的字体大小。大部分情况下，根元素等于html元素。

• ch & ex

ch 和 ex，基于字体的度量单位，依赖于当前设定的字体。
ch，通常被定义为数字0的宽度，这个单位的传统用途主要是盲文的排版。
ex，定义为当前字体的小写x字母的高度（x-height）或者 0.5em。

• vh & vw

其中，v 代表 viewpoint（视口）。
我们可以利用vh 和 vw 来参考使用视口的高度和宽度。

假设视口的宽度和高度分别为150px，250px
1vw = 150/100 px
1vh = 250/100px

• vmin & vmax

同样也是依据于视口的高度和宽度。
vmin和vmax是关于视口高度和宽度两者的最小或者最大值。

假设视口的宽度和高度分别为120px，260px
1vmin = 120/100 = 1.2px
1vmax = 260/100 = 2.6px