用rem调整文本大小

CSS3引入了一些新的尺寸单位(见www.w3.org/TR/css3-values),特别需要指出的是rem(或根em)似乎很稳定且得到浏览器很好的支持。由于所有用rem定义的字体大小相对于根元素文本的大小,这使得文本风格化更容易。em和百分比相对于其父元素来设置字体大小,因此,对于嵌套的元素,你经常就要做各种计算来算出你所要字体大小的值,而rem摆脱了这样的并发症。请看例子

<h1>Example <em>rem</em> exploration</h1>
<p>This example is written to show why the new CSS3 rem unit is useful. It allows you to much more easily size text and boxes, as rem sizing is always relative to the size of the <code>&lt;html&gt;<code> element.</p>

开始可以这样设置文本大小:

html{font-size: 62.5%; }
h1{font-size: 3em; }
p{font-size: 1.4em; }

非常简单的CSS。开始时你用久经考验的62.5%的字体设置使得整个文档的基准字体大小为10px(16px的62.5%,16px为所有浏览器中正文文本默认的标准字体大小)。然后你再设置<h1>为基准字体大小的3倍,换算之后就是30px;<p>为基准字体大小的1.4倍,也就是14px。
但是当你尝试调整那些元素里的子元素时,问题开始出现了。比如,如果你希望<code>元素的字体大小为11px,那么你用em要怎么写呢?1.1em肯定不对,因为它是基于14px(<code>的父元素的字体大小)的1.1em。事实上,11/14=0.786em才是你所需要的值。以此类推,如果是更复杂和更精确的设计,你就需要大量复杂的计算。这简直会让人抓狂。

如果这些文本字体大小用rem替换,那么调整文本字体大小就容易很多,因为一切都相对于<html>的font-size。因此如果你想得到11px的code字体,可以使用以下规则:

code{font-size: 1.1rem; }

rem单位的浏览器支持情况

  • Opera 11.6+

  • iOS 4.0+

  • Firefox 3.6+

  • Android 2.1+

  • Safari 5.0+

  • Mobile Chrome beta+

  • Chrome 6.0+

  • Opera Mobile 12

  • Internet Explorer 9+

  • Opera Mini 无

美中不足的是IE从第9版才开始支持rem,因此对旧版浏览器的支持你需要多一些关注。最好的处理方式就是,对旧版IE提供像素大小的后备方案,尽管它的灵活度较小,但至少保证字体大小是一样的。例如:

code{font-size: 11px; font-size: 1.1rem; }

提示:IE6和IE7不会调整以像素为单位的文本。那么,如果出于对可访问性的考虑,你打算采用rem作为文本字体大小单位,你可能要通过IE条件注释样式为IE6和IE7这两个浏览器增加文本字体大小。

节选自:《CSS3实战:开发与设计》