CSS中的长度单位的应用介绍

下面贴出绝对单位直接的换算公式：

1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px

px

作为CSS中最常用的单位，关于px还是有必要多说两句的。px的特点可以归纳如下：

1. 在低分辨率设备上，1px = 1像素；

2. 在高分辨率设备上，1px = 1/96in，1px不一定等于1像素（比如4.7英寸的iphone上 1px=2像素）；

3. 对于图片显示，1px = 1图片像素，比如：一个600x400分辨率的照片的的CSS宽高即为600px和400px（在4.7英寸iphone上要用1200x800个像素点显示）；

相对单位

相对单位意味着长度值是根据其他长度计算得出的。相对单位又可以分为基于字体（font based）和基于视窗（viewport based）的：

Font Based

em, ex

首先说说em和ex，em代表元素的当前字体大小，如果元素的font-size为2cm，那么1em即表示2cm。em可以用于控制尺寸，比如margin: 1em; text-indent:1.5em，此时这些尺寸和元素字体大小相关，因此在大屏幕上（字体尺寸较大）和小屏幕上（字体尺寸较小）会等比缩放，因此em可以用于响应式的设计。如果em直接用于font-size属性，如font-size: 2em，则em表示为父元素字体的大小。

ex很少被使用，ex表现的大小与字体的x-height相关。x-height大致等于字体中小写字母（例如a，c，m或o）的高度。相同font-size的不同字体的x-height可能会有很大的差别，所以使用ex产生的效果存在很大的不确定性。

rem

CSS在2013年创造出了一个新的单位rem，rem表示的是根元素（html元素的）字体大小，在每个元素里面em都可能不一样，但是rem都是一致的。因为这一特性，rem现在被更广泛的应用于响应式设计。

ch

ch用的表较少，是CSS3中新加入的单位，表示当前字体中的 "0" (零、unicode 字符 U+0030) 的宽度。

Viewport Based

vw，wh，vmin，vmax

都是CSS3中新加入的单位。vw，vh可以根据视窗大小调整字体大小。vw是视窗的1/100的宽度，而vh是视窗1/100的高度。此外还有vmin，它指的是vw以及vh间较小的那个，与之相对的还有vmax。这些单位在目前大部分浏览器上都有支持。