CSS進階：Media Query 媒體查詢

CSS 進階：Media Query 媒體查詢

簡介

21 世紀之後網際網絡迅速發展，各式各樣的硬體設備都開始能夠連上網路、使用瀏覽器訪問網頁。在此場景之下前端網頁的螢幕適配的要求更高，如果還使用傳統甚至寫死的元素內容，會使除了一般電腦螢幕之外的設備閱讀困難，甚至還要考慮到無障礙設計等特殊場景。這樣的需求之下就出現了如 Bootstrap 等響應式(RWD)框架，而其中的實現精髓便是基於媒體查詢(Media Query)的技術之上。

參考

CSS Media Queries 詳細介紹	https://www.oxxostudio.tw/articles/201810/css-media-queries.html
CSS @media Rule-w3school	https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

正文

媒體查詢，顧名思依舊是查詢媒體的特性並套用設定好的對應的樣式表，這邊有一點條件分支的感覺，滿足某某媒體條件的套用哪些形式，語法如下：

Definition 使用語法

使用上可以直接寫在 HTML 文件內的 <link> 標籤上：

<link rel="stylesheet" href="..." media="<condition>" />

或是在外部樣式表中作為一個過濾條件，選擇是否引入樣式組：

@media <condition> {
  /* styles */
  body {
    margin: 0;
  }
  div {
    display: block;
  }
  /* blablabla */
}

再或是將不同媒體條件的樣式表分離成一個獨立的 CSS 模塊，並在 @import 語句導入時過濾：

@import 'index.css' <condition>;

其中 <condition> 的部分可能是查詢某種媒體類型(Media Type)或是某種媒體特徵(Media Feature)，然後再搭配邏輯運算符組(OR,AND,NOT,ONLY)合成一個表達式

Media Type 媒體類型

我們可以透過查詢當前解析 HTML 的媒體類型為何，以下列出幾個常用的類型：

Type	Description
all	所有裝置
print	印刷裝置，以及印刷預覽等
speech	朗讀裝置，可以讀出頁面的裝置（無障礙設計）
screen	螢幕裝置

• Sample

@media screen {
  /* ... */
}
@media print {
  /* ... */
}

這樣就能夠根據解析設備的不同套用不同的樣式

Media Feature 媒體特徵

除了檢驗媒體類型之外，還能夠檢驗許多媒體特徵，可能根據視窗規格(Viewport/Page dimension)、顯示品質(Display Quality)、色彩(Color)、交互能力(Interaction)等多種類型，以下分別列出個類型常見的屬性：

視窗規格(Viewport/Page dimension)

Attribute	Description
width	螢幕寬度，min-width 表示下限、max-width 為上限
height	螢幕高度，支持min-height、max-height
aspect-ratio	螢幕寬度/高度比（1/1、1680/720），同樣支持min-aspect-ratio、max-aspect-ratio
orientation	螢幕方向，兩個可選值：landscape為橫向、portrait為垂直

Sample

@media (max-width: 500px) {
}
@media (orientation: landscape) {
}

顯示品質(Display Quality)

Attribute	Description
resolution	解析度（dpi、ppx），支持min-resolution、max-resolution
scan	電視掃描方式，可選值：interlace 交錯式掃描、progressive 漸進是掃描
update	更新方式，可選值：none(印刷裝置)、slow(嵌入式設備)、fast(電腦螢幕)
overflow-block	塊元素超出邊界的表現，可選值：none(隱藏)、scroll(滾動條)、optional-paged(手動查看)、paged(分頁顯示)
overflow-inline	與 overflow-block 類似，不過作用於行內元素
grid	網格媒體，可選值 0 或 1

色彩(Color)

Attribute	Description
color	輸出裝置的色彩位元數，支持 min-color、max-color
color-index	輸出裝置的色彩索引位元數，支持 min-color-index、max-color-index
monochrome	單色裝置，可選值：0(不是單色裝置)、其他
color-gamut	輸出色域，可選值：srgb、p3、rec2020

交互能力(Interaction)

Attribute	Description
pointer、any-pointer	指標裝置，可選值表示精度：none(沒有指標裝置)、coarse(低精度，如觸控板)、fine(高精度，如滑鼠 or 手寫筆)
hover、any-hover	裝置具備懸浮(hover)能力，可選值：none、hover

邏輯運算符：OR、AND、NOT、ONLY

以上透過指定媒體類型或是特定媒體特徵條件已經能夠建立大部分的條件，接下來就只缺將這些獨立的條件連接在一起的邏輯運算符，有 OR(或)、AND(與)、NOT(非)、ONLY(只有) 四種

OR 或

用於連接可選條件，語法使用 , 連接多個條件：

@media screen, (min-width: 1500px) {
}

AND 與

用於連接多個必要條件，語法使用 and 連接多個條件：

@media screen and (min-width: 1680px) {
}

NOT 非

用於排除特定條件，語法使用 not，為一元運算符：

@media not screen {
}

ONLY 只有

其實這個運算符沒什麼用，有點像是 NOT 的相反，其實和默認表現差不多：

<link rel="stylesheet" media="only screen and (color)" href="index.css" />
<!-- 其實兩者效果相同 -->
<link rel="stylesheet" media="screen and (color)" href="index.css" />

Sample

這邊舉出一些複合使用的範例：

@media not screen and (max-width: 500px), print and (orientation: landscape) {
}

結語

到此就結束啦！沒錯你沒有看錯，就這麼多，其實也沒什麼複雜嘛。然而真正困難的地方在於如何設計你的網頁以及樣式代碼，這邊就牽涉到網頁設計的部分，以確定如何設定媒體查詢的條件以及樣式的組織結構。從技術的層面來說，媒體查詢(Media Query)僅僅作為過濾樣式引入的條件設定罷了。