咨询热线
137 1731 25507×24小时服务热线
微信交流
终于等到你，还好我没放弃CSS3引入了一些新的尺寸单位，特别需要指出的是rem（或根em）似乎很稳定且得到浏览器很好的支持。由于所有用rem定义的字体大小相对于根元素<html>文本的大小，这使得文本风格化更容易。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>html</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;
}