倘若不斷向深處扎根，就能茁壯成長 - RM

前言

昨天我們提到了 Media query 的構成以及意義，了解到在對不同設備有不同的樣式設定時可以使用 Media query 讓我們在設備符合條件時才套用某種樣式，而今天我們將對於 Media query 中的 Media query list 以及 Media type、Media feature 部分進行介紹，那我們開始吧～

Combining Media Queries

Several media queries can be combined into a comma-separated media query list

當今天我們可能有多組 Media query，當希望對於其中幾組的 Media query 套用相同樣式時，可以使用 , 將多個 Media queries 組成一組，這稱之為 media query list。

舉例來說：

當我們今天設定兩組 Media query 組成的 media query list，當全部的 Media query 皆為錯誤 media query list 才錯誤，當其中一個符合 media query list 便是正確的，便會套用到其中正確的 Media query。

除此之外，當我們對 Media query 什麼都不設定，結果是 true

Media type

規範定義：
A media type is a broad category of user-agent devices on which a document may be displayed.

在先前的規範中，我們可以看見多種 Media type（下圖），但是在 level 4 中僅建議四種 Media type。

1. all 適用於所有裝備。
2. print 影印設備，包含預覽印刷的畫面。
3. screen 主要適用於螢幕。
4. speech 主要適用於語音方面的裝置。

至於為什麼不建議其他的 Media type ？這是因為規範認為多種細分 Media type 不足以區分各種需求下的不同設備，而且自 Media type 發明以來許多 Media type 也漸漸同化（例如 screen and handheld），所以更建議使用 Media features 去選擇所需要針對的不同設備狀態。

要特別注意的是規範有特別提到一點，對於 all 類型之後也傾向棄用。

Media feature

規範定義：
A media feature is a more fine-grained test than media types, testing a single, specific feature of the user agent or display device.

Media feature 比起 Media type 是一種更加細膩的條件，檢視裝置的特定功能。

• 始終與 () 連用。
• 可與 and、or 連用。

Media feature 可以有三種寫法：

1. 寫出 feature name: feature value 範例
2. 透過 boolean context 特性直接寫 feature name，當檢測到 feature name 不等於零則為 true 範例
3. 以 max-、min- 開頭，或是能夠以範圍來表示的要素 範例

舉例來說分別為：

寫出 feature name: feature value

使用 hoverfeature name: hoverfeature value 當作條件，符合時 Media query 結果為 true。

@media (hover:hover) {
  .name-value{
    color: red;
  }
}

boolean context

當裝置 color 不等於 0 便 Media query 是 true，若為 0 則 Media query 是 false。

@media (color) {
  .boolean{
    color: red;
  }
}

以 max-、min- 開頭，或是能夠以範圍來表示的要素

在範圍內符合時 Media query 結果為 true。

@media (min-width:120px) {
  .range{
    color: red;
  }
}

符合時可以看見套用文字紅色。

錯誤套用

在該 Media type 中套用不存在的 Media feature，則結果為 false

如上圖，在語音設備中套用設備縱橫比為錯誤的。

結語

今天介紹了有關於 Media feature、Media type、Media query list 的部分，明天將針對各種 Media feature 進行介紹呦～

參考資料：

Media Queries Level 4
Media Queries
前端新手村 Media Query - iT 邦幫忙
CSS Media Queries 詳細介紹 - OXXO.STUDIO

About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5

以上的部分有任何錯誤的地方，歡迎指正呦～非常感謝～～XD