全局根字體控制器 (Root Font-Size Controller)

拖動滑桿改變 <html> 的 font-size，觀察哪些單位會跟著動態縮放。

10px 32px
當前 html { font-size: 16px; }

1. Percentage (%)

width: 80%
相對於父元素的寬度。產生逐層縮小的效果。

Level 1 (80% of container)
Level 2 (80% of Level 1)
Level 3

2. The 'em' Unit

font-size: 1.5em
相對於父元素的字體。嵌套會導致連鎖放大失控。

L1 (1.5x)
L2 (2.25x)
L3 (3.375x)

3. The 'rem' Unit

font-size: 1.5rem
永遠相對於 <html>。嵌套也保持尺寸絕對一致。

Level 1 (1.5 * Root)
Level 2 (1.5 * Root)
Level 3 (1.5 * Root)