> ## Content Index
> Fetch the complete content index at: https://blog.hinablue.me/llms.txt
> Use this file to discover other available public pages before exploring further.

# [CSS] Media Query Level 4
- URL: https://blog.hinablue.me/css-media-query-level-4/
- Published: 2016-02-19T15:46:14.000Z
- Updated: 2026-07-06T18:52:02.000Z
- Author: Hina Chen
- Tags: Media Query, CSS Media Query Level 4

今年的 Draft 有更新，所以就繼續記錄一下。其實，我比較希望 CSS Selector Level 4 能趕快支援，不然我的 Level 4 筆記都已經一年多了，想起來真是讓人內牛滿面（欸

---

> [https://www.w3.org/TR/mediaqueries-4/](https://www.w3.org/TR/mediaqueries-4/?ref=blog.hinablue.me)
> 
> 最新的更新是 2016/01/26 還算有在更動（看看隔壁棚的 Grid Layout（最後更新 2013 年（已哭
> 
> UPDATE: 最近有更新了（淚

## 千年傳統，全新感受

沒有新增太多新玩具，棄用的東西到不少。

1. 除了 **all**, **screen**, **print**, **speech** 之外，其餘的 Media Query 的類型全部棄用。
2. **棄用** **device-width**, **device-height**, **device-aspect-ratio**
3. 加入\_\_布林值\_\_，主要是為了區隔 **none** 這個字，依據 Media Query 的規則，只要是 **0** 或是 **none**，都會被轉譯成 `true` 其餘則為 `false`。
4. **or**, **and**, **only**, **not** 不再被視為是合法的 Media Query 類型（以前也不是啊？特別強調的用意不知為何？

寫法上的變化，

1. 可以指定 **區間 (range)**
2. 更新頻率，**update-frequency**
3. 區塊溢出，**overflow-block**
4. 行內溢出，**overflow-inline**
5. 反轉色，**inverted-colors**
6. 指向裝置，**pointer**, **any-pointer**
7. 指向裝置覆蓋元件狀態，**hover**, **any-hover**
8. 環境，**light-level**
9. 腳本，**scripting**

比較讓人興奮的，大概就是可以自訂 Media Query 這件事情。

## 寫法上的變化

```language-css
@media (600px < width < 1200px) {
  /* 可以指定一個區間給 width */
}

```

```language-css
@media (update-frequency: slow) {
  /* 輸出設備或裝置的更新頻率 */
  /* 3 種設定值可用 */
  /* none, slow, normal */
}

```

```language-css
@media (overflow-block: scroll) {
  /* 區塊溢出顯示區域時的設定 */
  /* 4 種設定值可用 */
  /* none, scroll, optional-paged, paged */
}

@media (overflow-inline: scroll) {
  /* 區塊溢出顯示區域時的設定 */
  /* 2 種設定值可用 */
  /* none, scroll */
}

```

```language-css
@media (inverted-colors: none) {
  /* 顯示反轉色 */
  /* 2 種設定值可用 */
  /* none, inverted */
}

```

```language-css
@media (pointer: none) {
  /* 針對不同指向裝置給予不同設定 */
  /* 3 種設定值可用 */
  /* none, coarse, fine */
}

@media (hover: none) {
  /* 針對不同指向裝置給予不同覆蓋元件狀態設定 */
  /* 3 種設定值可用 */
  /* none, on-demand, hover */
}

```

```language-css
@media (light-level: dim) {
  /* 針對不同環境光源的設定 */
  /* 3 種設定值可用 */
  /* dim, normal, washed */
}

@media (scripting: enable) {
  /* 畫面載入動態腳本時啟用 */
  /* 3 種設定值可用 */
  /* none, initial-only, enabled */
}

```

## 自訂 Media Query

說穿了是類似自己定義一個名字，讓之後可以少寫一些判斷，主要的規則是這樣，

> @custom-media = @custom-media <extension-name> { <media-query-list> | true | false };

```language-css
@custom-media --uccu-window (max-width: 30cm);

@media (--uccu-window) {
  /* 直接套用 --uccu-window 設定 */
}

```

---

好像了無新意（呵欠