带你走进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
),根据设备和项目所需进行灵活运用,在研发过程带来极大的便利和可观的效果。