CSS中的单位

CSS中有很多关于尺寸的单位,包括:px,pt,%,em,cm等,根据其性质可以分为两类:绝对尺寸单位相对尺寸单位

绝对尺寸

绝对尺寸就是物理世界的度量单位,CSS中的绝对度量单位见下表

CSS中的绝对尺寸单位
符号名称备注
in英寸1 in = 2.54cm
cm厘米
mm毫米
pc派卡印刷行业使用的长度单位。1 pc = 1/6 in = 4.512 mm
pt1pt = 1/72 in = 0.352 777 mm, 1 in = 72pt
使用绝对尺寸的好处在于我们可以直观的理解尺寸的大小,但是,现在的页面往往要求支持在多终端下浏览,为了保证在手机、平板等设备上显示友好,绝对尺寸显然无法实现这一点,因此,最好通过相对尺寸单位来进行大小设置。 #相对尺寸 相对尺寸并不是一个确切的固定值,而是与当前屏幕的尺寸有关,因此,通过相对尺寸设置的大小,才能自动适应不同实际尺寸不同的屏幕。下表列出了所有的相对尺寸单位。
CSS中的相对尺寸单位
符号名称备注
%百分比
px像素
em当前字体大小
ex当前字体的高度值
rem根元素的em值
ch字符'0'显示的宽度
vw当前viewport宽度的1%
vh当前viewport高度的1%
vmin当前viewport的min(width, height)的1%
vmax当前viewport的max(width, height)的1%

百分比

百分比一般是相对于父元素的尺寸,不过有个特殊的情况,margin和padding在垂直方向上的值,如margin-top、padding-bottom,如果被设置成百分比,此时并不会使用父元素的高度来计算相应的margin、padding的值,而是会使用父元素宽度的值来计算。为什么会这样呢?这是由于父节点的高度本身就会通过其子元素进行计算,如果其子元素的margin或padding值反过来又根据父元素的高度值来计算,实际上就有点循环引用的意思,故此,在计算垂直方向上的margin和padding的时候,会有这样的特例。

像素

像素这个单位经常被一些人当成是绝对尺寸误用,实际上,像素是一个相对单位,一个像素有多大,首先,跟像素所在的屏幕大小有关,其次,还跟屏幕自身的分辨率有关,分辨率常见的单位是DPI(Dot Per Inch,每英寸点数)。假设一个屏幕宽10英寸,DPI = 72,这时,水平方向上一行就有720个像素, 一个像素的宽度就是1/72英寸。在屏幕尺寸固定的情况下,分辨率越高,每个像素的实际大小就越小,反之则越大,通过更改桌面分辨率就能明显感觉到,800*600时,桌面图标明显比1600*1200更大,能显示的图像细节更小。

像素作为相对单位,是相对于整个屏幕而言,因此常常被当成绝对单位使用。一般的布局容器元素,还是建议使用%来进行布局尺寸控制。像素来控制图像相关元素的大小。

em、ex、rem和ch

em和ex都是与当前字体大小相关,适合拿来对文本内容的元素进行尺寸设置。例如一个段落元素,希望它最多显示4行时,就可以通过如下CSS代码实现:


{
line-heigh: 1.2em;
max-height: 4.8em;
}

当然,在Chrome中,还有-webkit-line-clamp可以实现一样的效果,但这个CSS属性在IE和Firefox下均无效。而通过em,就可以灵活的将容器大小与实际使用的字体直接关联。

ex类似于em,不同的是,em关联的是字体的大小值,ex是相对字体的x高度值。所谓的x高度,是指小写英文字母的高度,相对来说应用场景更少。

em除了拿来设定文本容器的尺寸,还可以被用来设置字体的大小、文本缩进值、边距等。使用em设置字体大小有一个好处,当HTML页面没有设置字体大小,或者使用em来设置字体大小时,将使用设备的默认尺寸,这对于跨平台、多终端的页面来说,用户阅读时具体的字体大小就是用户日常适应的大小。

还有一个rem(root em),由于不同的元素可能有不同的font-size,因此em相对于屏幕的实际大小也会不尽相同,而rem始终代表文档根元素的字体大小,使用rem可以保证不同容器之间的相对字体值一致。

还有一个比较少提到的单位,ch,它代表字符'0'显示的宽度,在一些文本布局场合可能用到。

vw,vh, vmin, vmax

vw,vh都是相对于整个viewport的大小对应尺寸的1%,vw就是viewport宽度的1%,vh则是viewport高度的1%, 对于根元素的子元素,通过百分比也可以达到类似的效果,但对于其他元素,有了vw,vh的值,做针对当前屏幕大小的尺寸设置就更为方便了。

另外的vmin和vmax,则对应的是min(vw,vh)和max(vw,vh)的取值,在处理一些resize的尺寸变化时,使用起来非常方便。

总结

通过上述的分析,在使用CSS进行大小设置时,应当优先考虑如下规则:

  • 尽可能的优先使用相对尺寸大小,它有利于跨平台的显示效果
  • 容器元素的尺寸尽量通过%或者vw/vh/vmin/vmax来赋值,这样在屏幕尺寸变化时,可以自适应
  • 文本容器的高度、缩进、padding、margin等设置,尽量通过rem,em,ex来设置
  • 字体的大小设置,也尽量使用rem,em来设置

附录

浏览器兼容性
单位 Chrome Internet Explorer Firefox Safari Opera
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 9.0 19.0 6.0 20.0
vmax 26.0 不支持 19.0 7.0 20.0
Show Comments

Get the latest posts delivered right to your inbox.