# CSS 單位
###### tags: `CSS`
### px
> 絕對單位，代表螢幕中每個「點」( pixel )。
## 文字相對單位
### em
> - **font size** of the element
> - ==相對單位==，每個子元素透過「倍數」乘以**父元素**的 px 值。
> - 文字比例會受到外圍的文字大小所影響。
:::warning
當元件過度巢狀時，em 單位會變得複雜難用。
:::
### rem
> - **font size** of the **root** element
> - ==相對單位==，每個元素透過「倍數」乘以根元素的 px 值。
> - 文字比例會會依照最外層的 html 標籤的預設文字大小。

#### 常用 rem 轉換
| px | rem |
| -------- | -------- |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| ==16px== | ==1rem (base)== |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 30px | 1.875rem |
| 32px | 2rem |

## 視窗單位


### vh
> - **v**iewpoint **h**eight
> - 可視區 (viewport) 的高度 (px) ，除以 100 ，等於 1vh。
### vw
> - **v**iewpoint **w**eight
> - 可視區 (viewport) 的寬度 (px) ，除以 100 ，等於 1vw。

### vim, vmx
> 當前 vw 和 vh 中較小/大的一個值。
#### 使用情境
1. 製作 RWD 時，使用 vw、vh 設置字體大小，在直屏和横屏顯示的字體大小是不一樣的，但若使用 vmin 與 max 則可使文字在直橫屏一致。
2. 有一個元素，你需要讓它在屏幕上始終可見：

.box { height: 100vmax; width: 100vmax; background:red;}