我们首先介绍下和我们熟悉的很相似的货。em 被定义为相对于当前对象内文本的字体大小。举个例子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设置的font-size。

<body>
 <div class="test">Test</div>
</body>
body {
 font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

你看,这里div这娃的字体大小是1.2em。解释来说,就是他从body爹爹那里继承的字体大小(这里是14px)的1.2倍,结果就是16.8px。

但是,如果你用em一层一层级联得定义嵌套元素的字体大小又会发生什么事情呢?在下面这一小段代码里我们应用了和上面一样一样的CSS,每一个div都从它上一级父元素继承了字体大小,并且逐渐得增加。

<body>
  <div>
    Test <!-- 14 * 1.2 = 16.8px --> 
      <div> 
       Test <!-- 16.8 * 1.2 = 20.16px --> 
         <div> 
          Test <!-- 20.16 * 1.2 = 24.192px --> 
         </div> 
      </div> 
  </div> 
</body> 

虽然在某些地方这正是我们想要的,但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候嘛,我们就可以使用 rem 了。 ‘r’是“root”的缩写,意思就是1rem等于根元素的字体大小;大部分情况下,根元素就是<html>元素了。

html { 
  font-size: 14px; 
} 
div { 
  font-size: 1.2rem; 
}

这样在上面的那三个嵌套的div娃们的字体大小都是 1.2*14px = 16.8px 了。

适用于网格布局

Rems 不仅仅只是在设置字体大小上很方便。再炒个栗子,你可以用基于html根元素字体大小的rem作为整个网格布局或者UI库的大小单位,然后在其他特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性,

.container { 
  width: 70rem; // 70 * 14px = 980px 
}

概念上来说,这个方法的思想就是让你的界面根据你的内容进行缩放。但是,这样做并不是对所有的情况都有意义。