# CSS 23. Relative Units - %, vw, vh / 相對單位

- %
在設定 `width` `height` 時，會相對去看**父層的長寬度**。

假設我們有一個外框，它的長寬條件為: `500px`

<div class="container">
  <div class="box"></div>
</div>

.container {
  width: 500px;
  height: 500px;
  border: 3px solid blue;
}

// box 是子層，來設定寬度各 50% 看看

.box {
  background: red;
  width: 50%;
  height: 50%;
}


- 原理解釋:

**container** 的 `width` / `height` 為 `500px`

那麼 box 的長寬設定 **50$ = 500 * 0.5** 的意思，也就是 `250px`

---

- vw、vh:

v = viewport，根據裝置的極限寬高來決定。

例如: 90vh，就是瀏覽器的 90% 高度
10vw，就是瀏覽器的 10% 高度

- [範例](https://codepen.io/rrpaqjcq/pen/abKWjYp)

###### tags: `2022 網頁開發全攻略教程 / CSS篇章 - other`