CSS中的长度单位

带你走进CSS中的长度单位

CSS中的单位最常用的是px，但是肯定也会遇到em，cm等其他单位，掌握这些单位的特质才能灵活运用这么多不同的单位。

长度单位包括包括：

• 相对单位
  • em,ex,ch,rem,vw,vh,vmax,vmin
• 绝对单位
  • cm,mm,q,in,pt,pc,px

绝对单位

我们在这里只介绍常用绝对单位。绝对单位中最常用的是px，绝对单位之间的换算如下：

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

px

px单位名称为像素（Pixels）。像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。在电脑屏幕上每一个小方格的长度就可以理解为是1px。

当图片尺寸以像素为单位时，我们需要指定其固定的分辨率，才能将图片尺寸与现实中的实际尺寸相互转换。例如大多数网页制作常用图片分辨率为72，即每英寸像素为72，1英寸等于2.54厘米，那么通过换算可以得出每厘米等于28像素；又如15x15厘米长度的图片，等于420*420像素的长度。

in

in单位名称为英寸（Inches)。映射为像素单位的话：

1in = 96px

cm

cm单位名称为厘米（Centimeters)。是我们生活中熟知的长度单位，也可以映射为像素单位：

1cm = 37.8px

mm

mm单位名称为毫米（Millimeters）。也是我们生活中熟知的长度单位，映射为像素：

1mm = 3.78px

相对单位

我们在这里只介绍常用相对单位。相对单位中最常用的是em和rem。

em

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）。在没有任何CSS规则的前提下，1em的长度是：

1em = 16px

em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算了，这不怎么方便，还好rem解决了这个问题。

rem

相对于根元素(即html元素)font-size计算值的倍数。此单位为css3新增单位，不兼容低版本IE，Safari浏览器。

总结

总的来说，CSS中相对单位，绝对单位还有本文未介绍的视口单位（vm，vmvh，vmin，vmax），根据设备和项目所需进行灵活运用，在研发过程带来极大的便利和可观的效果。