CSS中的度量单位分为相对和绝对两种。

1、绝对度量单位：

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

比如我们准备设计一张A4纸的打印表格，使用绝对单位就可以精确控制。

1）cm（centimeter）：厘米

2）mm（millimeter）：毫米

3）in（inch）：英寸， (1in = 96px = 2.54cm)

4）pt（point）：磅， 确切的说法是一个专用的印刷单位，大小为1/72英寸，用于印刷。

5）pc（pica）：派卡，大约 12pt，相当于我国新四号铅字的尺寸

2、相对单位

1）em：相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体大小都是16px，则2em == 32px。em的值并不是固定的；em会继承父级元素的字体大小。

2）ex：根据所使用的字体中小写字母 x 的高度作为参考。在实际使用中，浏览器将通过 em 的值除以 2 得到 ex 的值。为什么这样计算呢？因为 x 高度计算比较困难，且小写 x 的高度值是大写 x 的一半；另一个影响 ex 单位取值的是字体，由于不同字体的形状差异，这也导致相同大小的两段文本，但由于字体设置不同，ex 单位的取值也会存在很大的差异。

3）ch：CSS3新增单位，数字 0 的宽度

4）rem：CSS3新增单位，rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。

5）vw：CSS3新增单位，viewpoint width，视窗宽度，1vw=视窗宽度的1%。如果浏览器的width是900px，1vw求得的值为9px

6）vh：CSS3新增单位，viewpoint height，视窗高度，1vh=视窗高度的1%。如果浏览器的高是900px，1vh求得的值为9px

7）vmin：CSS3新增单位，vw和vh中较小的那个。如果浏览器设置为1100px宽、700px高，1vmin会是7px

8）vmax：CSS3新增单位，vw和vh中较大的那个。如果浏览器设置为1100px宽、700px高，1vmax会是11px

9）%：百分比也是一个相对单位值。百分比值总是通过另一个值来计算，一般参考父对象中相同属性的值。例如，如果父元素宽度为 500px，子元素的宽度为 50%，则子元素的实际宽度为 250px。

10）px：像素 (1px = 1/96th of 1in)   px单位是根据屏幕像素点来确定的。这样不同的显示分辨率就会使相同取值的 px 单位所显示出来的效果截然不同。譬如，Windows的用户所使用的分辨率一般是96像素/英寸，而MAC的用户所使用的分辨率一般是72像素/英寸。

这里要区分两个概念，就是css中的px并不等价于我们日常所说的设备像素。

设备像素设是物理概念，指的是设备中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。

CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。

比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。

设备像素与CSS像素之间的换算是如何产生的呢？
这就需要要谈到每英寸像素(pixel per inch 常说PPI)和设备像素比(device pixel ratio)。

每英寸像素(pixel per inch)：
ppi，表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素

设备像素比(device pixel ratio)：
以上计算出ppi是为了得到密度分界，获得默认缩放比例，即设备像素比。

ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）。

获得设备像素比后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。