毅窝疯

CSS字体单位: em、rem与px、pt

By hybnx 2015-07-06 CSS 来源:http://www.ieric.cn/archives/556 访问:1974

CSS中,长度单位有两种,分别是绝对长度单位和相对长度单位。

绝对长度单位 

绝对长度单位分为in(英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(pica)。其中,in(英寸)、cm(厘米)、mm(毫米)和实际中常用的单位完全相同。重点介绍一下pt(磅)、pc(pica)。

pt(磅):是标准印刷上常用的单位,72pt的长度为1英寸。
pc(pica):这也是一个印刷上用的单位,1pc的长度为12磅。

绝对长度单位,虽然理解起来很容易,但是在网页的设计中很少用到。

相对长度单位 

相对长度单位是使用最多的长度单位。包括em、rem、px等,下面分别介绍一下。

em是定义文字大小的值,也就是文本中font-size属性的值。例如:定义某个元素的文字大小为12pt,那么,对于这个元素来说1em就是12pt。单位em的实际大小是受到字体尺寸的影响的。

下面介绍一下rem,众所周知在web中有很多字体单位(font-size)较常见的有em,px,让我们对比一下这两种单位:

  • px是绝对值,准确而稳定.但是它的改变会影响页面布局.
  • em是相对值,它以父元素的大小为基准单位,来计算大小.所以很难把握.

考虑到这么多字体单位的优缺点,在CSS3中rem诞生了.rem也是相对单位(rem=root em)很明显rem是由em变化而来,或者说rem是em的升级版,具体来历.我们就不要去追究了,从字体表面上看,它就是这么回事.

root em,就是相对于根目录的em而不是相对于父元素,也就是说,它虽然是绝对值,但是只是相对于根目录来说也就是html,它不会随着其它元素的改变而改变.也就是说,我们只要设定html的文字大小就可以了.而不用考虑其它因素.

而且他还具有非常好的支持Chrome,Firefox,Safari,Opera,IE9+.IE6,7,8就只能使用px或者em了.

html{   
    font-size:62.5%;   
}

为什么要这么设置呢?因为网页上的字体默认是16px,而16px的62.5%就是10px;也就是说这样的活1rem就等于10px,这个对于我们来说是非常棒的,font-size:1.2rem,当然为了兼容IE的低级版本还要写font-size:12px,别忘了要写在rem的前面.

px就是通常所说的像素,使网页设计中使用最多的长度单位。将显示器分成非常细小的方格,每个方格就是一个像素。表面上看好像很容易理解,实际上,px的具体大小是受到屏幕的分辨率影响的,也就是和划分屏幕各自的方式有关。例如,同样是100px大小的字体,如果显示器使用800×600像素的分辨率,那么,每个字的宽度是屏幕的1/8。若将显示器的分辨率设置为1024×768像素,那么同样是100px字体的字,其宽度就越为屏幕宽度的1/10。

pt是印刷业上常使用的单位,磅的意思.一般也用于页面打印排版.

优缺点:

px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的.

em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小.
比如


这里的字是24px

如果使用em来指定填充,填充的宽度是相对于DIV元素的字体大小而定的.
如果用户群都使用最新版的浏览器,那推荐使用rem.


摘自:

http://wenyejie.com/?p=1218

http://www.cnblogs.com/leejersey/p/3662612.html

http://www.cnblogs.com/jerryjaord/archive/2010/06/30/1768341.html