# [CSS] 常見單位

###### tags: `CSS`

* [絕對單位](#絕對單位)：px、pt、pc、cm、mm、in、Q
* [相對單位](#相對單位)：%、em、rem、ch、ex、lh、rlh
* [Viewport 單位](#Viewport-單位)
* vw、vh、vmax、vmin、vi、vb
* lvw、lvh、lvmax、lvmin、lvi、lvb
* svw、svh、svmax、svmin、svi、svb
* dvw、dvh、dvmax、dvmin、dvi、dvb
* [容器查詢單位](#容器查詢單位)：cqw、cqh、cqi、cqb、cqmax、cqmin
* [角度單位](#角度單位)：deg、turn、rad、grad
* [時間單位](#時間單位)：s、ms
* Flex 單位：fr 分數
* Resolution 解析度單位：dpcm、dpi、dppx、x
* 用在 `@media`
* Safari 不支援
* Frequency 頻率單位：Hz、kHz
* 2024-02-24 目前未在任何 CSS 屬性中使用，沒有瀏覽器支援此單位

## 絕對單位
網頁排版中較常使用 px，其他絕對單位大多數用於列印
* px
* 1px 是設備的一個點
* 固定值，不會因父元素或視窗的尺寸變動而改變
* pt：常見於文書處理軟體中
* pc：與印刷有關的單位

## 相對單位
* %
* 相對於父元素的值的百分比
* 將設計稿尺寸換算成 % 後，建議值的小數點可寫到後六位（五位數仍有機會跑版，六位數比較沒問題）
* 使用在 `font-size`：相對於父元素的字體大小的百分比
* 使用在尺寸時，以父元素的 content-box 計算
* 若本身設定絕對定位，則以具定位設定的父元素的 padding-box 計算

    <div class="parent">
      <div class="child"></div>
    </div>

    .parent {
      width: 220px;
      height: 150px;
      padding: 30px;
    }

    /* 以父元素的 content-box 計算 */
    .child {
      padding: 10%; /* 22px，父元素的 width 的 10% */
      width: 50%; /* 110px，父元素的 width 的 50% */
      height: 50%; /* 75px，父元素的 height 的 50% */
    }

    .parent {
      width: 220px;
      height: 150px;
      padding: 30px;
      position: relative;
    }

    /* 以具定位設定的父元素的 padding-box 計算 */
    .child {
      padding: 10%;  /* 28px */
      width: 50%; /* 140px */
      height: 50%; /* 105px */
      position: absolute;
    }

* em
* 依使用情境計算基準不同
* 使用在 `font-size`：相對於父元素的字體大小做倍數計算
* 使用在其他屬性：相對於本身字體大小做倍數計算
* 由於是繼承父元素的字體大小，在多層排版上可能造成混亂
* 範例：

    <div class="parent">
      <p class="child">text</p>
    </div>

    .parent {
      font-size: 14px;
    }

    .child {
      font-size: 2em; /* 28px */
      height: 3em; /* 84px */
    }

* rem
* 相對於根元素 `html` 的字體大小做倍數計算
* 若未設定，預設值為 16px
* ch：數字 0 的大小，會因字體不同而導致不同的寬度
* ex：英文小寫 x 的高度
* lh
* 相對於本身的行高
* 應用情境
* [文字區塊的背景](https://codepen.io/yuna9068/pen/PoLrqYX)：搭配 `repeating-linear-gradient` 製作斑馬紋文字、每行文字加上底線
* rlh：相對於根元素 `html` 的行高

## Viewport 單位
* viewport：視口，視窗的可視範圍。不包含卷軸。
* 目前共有 24 種單位，依開頭英文字母可分為 Default、Large、Small、Dynamic 四大類

### Default
* vw：viewport 寬度
* 100vw 是視窗左側邊緣到視窗右側邊緣，使用時可能會因為有直向卷軸而超出可視範圍，導致出現橫向捲軸
* vh：viewport 高度
* vmax：viewport 比較長的那側（vw、vh 兩者中較大的值）
* vmin：viewport 比較短的那側（vw、vh 兩者中較小的值）
* vi：viewport inline size，比較偏向邏輯屬性
* 會受到 `writing-mode` 屬性影響
* 值為 `horizontal-tb`：等同 vw
* 值為 `vertical-lr` 或 `vertical-rl`：等同 vh
* vb：viewport block size，比較偏向邏輯屬性
* 會受到 `writing-mode` 屬性影響
* 值為 `horizontal-tb`：等同 vh
* 值為 `vertical-lr` 或 `vertical-rl`：等同 vw

### Large
* lvw、lvh、lvmax、lvmin、lvi、lvb
* 當網址列或 tab bar 消失時的 viewport（瀏覽器 UI 最小，網站內容最大時的大小）
* 本質等同 Default

### Small
* svw、svh、svmax、svmin、svi、svb
* 當網址列或 tab bar 出現時的 viewport（瀏覽器 UI 最大，網站內容最小時的大小）

### Dynamic
* dvw、dvh、dvmax、dvmin、dvi、dvb
* 動態的值，會隨著 viewport 變化而改變
* 因值會隨著滾動頁面而改變，可能會影響使用者體驗（可考慮加 `transition` 使改變過程看起來順暢一點），也影響到效能

## 容器查詢單位
:::warning
* [須留意瀏覽器支援度](https://caniuse.com/mdn-css_types_length_container_query_length_units)
* 查詢的父層容器要加上 `container-type`、`container-name` 屬性，簡寫 `container: container-name / container-type;`
:::

* cqw：查詢容器寬占比
* cqh：查詢容器高占比
* cqi：container query inline，等同 cqw
* cqb：container query block，等同 cqh
* cqmax：container query 較長的那側（cqi、cqb 兩者中較大的值）
* cqmin：container query 較短的那側（cqi、cqb 兩者中較小的值）

## 角度單位
起始點為 12 點鐘方向
* deg 度：一圈是 `360deg`，順時針為正值，逆時針為負值
* turn 圈：一圈是 `1turn`
* rad 弧度：一圈大約是 `6.28318rad`，順時針為正值，逆時針為負值
* grad 梯度：一圈是 `400grad`

## 時間單位
**數值為 0 時也要寫上單位，不可省略**
* s：秒
* ms：毫秒

## 參考資料
* [CSS values and units - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units)
* [CSS values and units - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#what_is_a_css_value)
* [CSS *vh (dvh, lvh, svh) and *vw units](https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4)
* [The large, small, and dynamic viewport units](https://web.dev/blog/viewport-units)
* [CSS Values and Units Module Level 4](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths)
* [李建杭（Amos），《金魚都能懂的CSS必學屬性：網頁設計必備寶典》（博碩文化，2022），頁20-25。](https://www.drmaster.com.tw/bookinfo.asp?BookID=MP22113)

---

:::info
建立日期：2024-02-23
更新日期：2024-02-24
:::