# CSS 單位 px,em,rem,%

###### tags: `HTML, CSS`

## 網頁 ( 單位 )

* px：絕對單位，代表螢幕中每個「點」( pixel )。
* em：相對單位，每個子元素透過「倍數」乘以**父元素**的 px 值。
* rem：相對單位，每個元素透過「倍數」乘以**根元素**的 px 值。
* %：相對單位，每個子元素透過「百分比」乘以父元素的 px 值。

## 網頁 ( 屬性名稱 )
* medium：預設值，等於 16px ( h4 預設值 )
* xx-small：medium 的 0.6 倍 ( h6 預設值 )
* x-small：medium 的 0.75 倍
* small：medium 的 0.8 倍 ( h5 預設值，W3C 定義為 0.89，實測約為 0.8 )
* large：medium 的 1.1 倍 ( h3 預設值，W3C 定義為 1.2，實測約為 1.1 )
* x-large：medium 的 1.5 倍 ( h2 預設值 )
* xx-large：medium 的 2 倍 ( h1 預設值 )
* smaller：約為父層的 80%
* larger：約為父層的 120%

## px

> px 是一種絕對單位，設定多少大小就會在螢幕上忠實呈現。

<div style="font-size:16px;">16px
    <div style="font-size:20px;">20px
        <div style="font-size:24px;">24px
            <div style="font-size:16px;">16px
                <div style="font-size:32px;">32px</div>
            </div>
        </div>
    </div>
</div>


## em

> em 是相對單位，為每個子元素透過「倍數」乘以父元素的 px 值
>
> 比較特別的是，如果巢狀結構比較多層，內層的元素會在乘上 em 的倍率喔！


## rem

> rem 是相對單位，為每個元素透過「倍數」乘以根元素的 px
>
> 所有 rem 的更動都是根元素的倍數


## %

> % 百分比是相對單位，和 em 大同小異，簡單來說 em 就是 % 數字的部分除以一百

<div style="font-size:120%;">120%
    <div style="font-size:120%;">120%
        <div style="font-size:120%;">120%
            <div style="font-size:120%;">120%
                <div style="font-size:120%;">120%</div>
            </div>
        </div>
    </div>
</div>

最外層 html font-size = 16px的話

最內層就會是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px


## 實作上面的選擇

### 選擇em

建議使用在限制區域的內容、元件

### 選擇rem

因為是根元素的倍數所以很適合處理整體大小尺寸的切換