CSS3 新增了一个相对单位rem(root em,根em)。
使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
在W3C官网上是这样描述rem的——“font size of the root element” 。
em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字体的百分比进行设置,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需.
html {
/*10 ÷ 16 × 100% = 62.5% :定义了以10px为基准*/
/*设置这个值主要方便计算,如果没有设置,将是以“16px”为基准*/
font-size: 62.5%;
}
body {
/*1.4 × 10px = 14px */
font-size: 1.4rem;
}
h1 {
/*2.4 × 10px = 24px*/
font-size: 2.4rem;
}