聊一聊CSS中的长度单位

CSS中有不少属性能够接受长度值，好比： width, height, margin, padding, border-width, font-size, text-shadow。由于使用场景多，所以CSS也提供了许多长度单位。有的是平常生活中使用的单位，好比：厘米（cm）和英寸（in）；有的是印刷行业使用的单位，好比：point（pt）和pica（pc）；有的是专门为CSS发明的单位，好比：px。

使用场景

那么这些属性和单位怎么配合使用呢？特定的属性须要使用特定的单位吗？其实并不是如此，单位和属性无关，同一个属性任何单位都适用，什么时候使用何种单位是没有限制的，若是属性接受以px为单位的值（好比：margin: 5px），那么它也能够接受英寸或厘米（margin: 1.2in; margin: 0.5cm）为单位的值，反之亦然。

单位虽然和属性无关，可是和输出的媒介有必定关系，好比输出到是屏幕仍是纸张。在屏幕上显示和在纸张上面打印推荐使用的单位是不同的。下表给出了推荐的使用方法：

输出媒介	推荐	偶尔使用	不推荐
屏幕	em, px, %	ex	pt, cm, mm, in, pc
打印	em, cm, mm, in, pt, pc, %	px, ex

除了和输出媒介的关系，这些单位能够从长度值的计算方式区分为绝对单位和相对单位。

绝对单位

绝对单位（px，cm， mm，in，Q，pt和pc）意味着以此为单位的长度值与其表明的物理长度相等，好比width: 1cm即与现实世界中的1cm长度相等，也意味着绝对单位在全部的媒介上的显示效果是一致的。但这是理想状况，受显示器和不一样浏览器CSS实现的差别，在不少设备上绝对单位显示的并不精确。由于px和in的关系为1in=96px， 在低分辨率设备上，1px为1像素（pixel，也是px名称的由来）长度，而低分辨率的屏幕上1px每每大于1/96in，因此从px计算获得的其余绝对单位值都不许确。而在高分辨率设备上（如如今的高清屏和打印机）绝对单位显示得更精确。因为以上缘由，绝对单位更多的是在打印时使用。

曾经，CSS要求在计算机屏幕上正确显示绝对单位。可是因为大部分厂商并不能实现这一要求，因此CSS在2011年放弃了这一要求。目前，绝对单位仅在打印和高分辨率设备上正常工做。CSS没有明肯定义“高分辨率”的含义。可是，因为目前低端打印机的每英寸点数为300 dpi，而高端屏幕的每英寸点数为200 dpi，所以所谓的“高分辨率”可能介于二者之间。。

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

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。这些单位在目前大部分浏览器上都有支持。