先看這個例子
根字級 16px。第一組外內兩層都用 1.25em，第二組兩層都用 1.25rem。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 外層 em | 16×1.25 | 20px |
| 內層 em | 20×1.25 | 25px |
| 兩層 rem | 各自按根 16×1.25 | 20px、20px |
瀏覽器怎樣處理
font-size 的 em 按沿用字級解算，rem 則按根字級。巢狀時便看出差別。兩者沒有一概較好，須按工作需要局部倍增，還是按根字級統一。
把 rem 全改 em，內層便會再乘一次
對照在原本想同用根比例的兩層，都套 1.25em。
<style>body{margin:8px}</style>
<style>html{font-size:16px}.root-relative{font-size:1.25em}</style><section class="root-relative">外層<section class="root-relative">內層</section></section>外層 20px，內層 25px，不是兩層都 20px。
試着修正
根字級改成 20px，原正例兩組會用甚麼字級？
查看參考答案
em 為 25px、31.25px；rem 兩層都為 25px。
- 根字級及兩層計算字級都要記。
- 按真正巢狀測，不只看單一元素。