在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSSFont-Size:emvs.pxvs.ptvs.percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。
最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用m来设置Web页面的字体大小。让我一下子就来劲了,一口气看完并测试了一回,还真是爽歪歪的呀。师傅说好东西不能吃独食,于我就在这里给大家吹吹这个从没见过的REM。
在详细介绍m之前,我们先一起来回顾一下我们常用的两种记量单位,也是备受争论的两个:
PX为单位EM为单位
PX为单位
在Web页面初期制作中,我们都是使用px来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用em来定义Web页面的字体。
em为单位
前面也说了,使用是px为单位是比较方便,而又一致,但在浏览器中放大或缩放浏览页面时会存在一个问题,要解决这个问题,我们可以使用em单位。RichardRutter’在《Howtosizetextusingems》一文中有做过详细的介绍,追至早一点,RichardRutter也在《HowtoSizeTextinCSS》中进行过深入的剖析。
这种技术需要一个参考点,一般都是以body的font-size为基准。比如说我们使用1em等于10px来改变默认值1em=16px,这样一来,我们设置字体大小相当于14px时,只需要将其值设置为1.4em。
body{ font-size:6.5%; /*10÷16×%=6.5%*/}h1{ font-size:.4em; /*.4em×10=4px*/}p{ font-size:1.4em; /*1.4em×10=14px*/}li{ font-size:1.4em; /*1.4×?=14px?*/}
为什么li的1.4em是不是14px将是一个问号呢?如果你了解过em后,你会觉得这个问题是多问的。前面也简单的介绍过一回,在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,其真正的计算公式是:
1÷父元素的font-size×需要转换的像素值=em值
这样的情况下1.4em可以是14px,也可以是0px,或者说是4px,总之是一个不确定值,那么解决这样的问题,要么你知道其父元素的值,要么呢在任何子元素中都使用1em。这样一来可能又不是我们所需要的方法。
这里我只是简单的介绍了一个这两个单位的使用,具体一点的大家可以参阅:
BestPractices的站长Kyle的《CSSFont-Size:emvs.pxvs.ptvs.percent》ConvertingpxintopercentageandemforlativeCSSfontsizesEmVsPercentWidthsCSS:UnitsofMeasumentJenniferKyrnin的UsingPoints,Pixels,Ems,orPercentagesforCSSFonts
Rem为单位
CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的m。在W3C