css的长度单位

css中长度单位有很多，可谓五花八门，但可分为这两类：

1. 绝对长度单位
   彼此固定，不会因为其他元素的尺寸变化而变化。主要有cm mm Q in pc pt px
2. 相对长度单位
   指定相对于另一长度的长度。主要有em ex ch rem %和可视区百分比长度单位 vm vh vmin vmax

绝对长度单位

px单位名称为像素，像素或许被认为是最好的“设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

in英寸是一个物理度量单位，但是在CSS领域，英寸被直接映射成像素。1in == 96px

cm厘米，也被直接映射成像素。1cm == 37.8px

mm毫米，1mm == 0.1cm == 3.78px

Point pt是一个物理度量单位，1pt=1/72 in

Pica pc和points一样，只不过1pc=12pt。

---

相对长度单位

Em 是一个相对单位。起初排版度量时是基于当前字体大写字母”M”的尺寸的。当改变font-family时，它的尺寸不会发生改变，但在改变font-size的大小时，它的尺寸就会发生变化。在没有任何CSS规则的前提下，1em的长度是：1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm。

Rem和em一样也是一个相对单位，但是和em不同的是rem总是相对于根元素(如:root{})，而不像em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。值得注意的浏览器支持问题： IE8，, Safari 4或 iOS 3.2中不支持rem单位。

vw是可视区宽度单位。1vw等于可视区宽度的百分之一。vw单位跟百分比很相似，不同的是vw的值对所有的元素都一样，与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。

vh和vw（viewport widht）单位一样，不同的是vh是相对于可视区的高度。

vmin的值是选取 vw 和 vh 中最小的那个。在标准尺寸类型的使用实例中，和由自己确定屏幕大小的vw、vh单位相比，vmin是一个更有用的度量标准。

vmax的值是选取 vw 和 vh 中最大的那个。值得注意的浏览器支持问题：webkit内核的浏览器支持vmin，不支持vmax。但是Firefox支持vmax。

---

个人总结

在一般的PC端网页制作过程中，一般直接用px为单位，在移动端由于vw,vh单位的兼容性，目前一般采用rem + %或者rem + vw/vh。