我們首先介紹下和我們熟悉的很相似的貨。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 
}

概念上來說,這個方法的思想就是讓你的界面根據你的內容進行縮放。但是,這樣做并不是對所有的情況都有意義。