| 【前文提要】何謂 Media Query 與 Media Feature？ 前端工程師在製作 RWD 響應式網頁時， 網頁設計 的部分一定會用到的 CSS 語法就是 Media Query。我們可以把 Media 視為 CSS 的擴充元件，而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (Media Type)，再針對這些類型 (Media Type) 定義其樣式 (Media Feature)，而這個樣式就是所謂的「Media Feature (中文譯作「媒體樣式」或是「媒體特徵」)」。 參考文章：如何在RWD網頁中套用Media Query語法 而 Media Query 的語法包含了三個部分：媒體類型 (Media Type)、and/not/only 判斷條件與媒體特徵 (Media Features)。「媒體類型 (Media Type)」與「and/not/only判斷條件」已在本系列的前篇文章做說明，此篇就針對媒體特徵 (Media Feature) 的「顏色類」和「互動類」屬性做說明。而至於「視窗或頁面尺寸類 (Viewport/Page Dimensions)」以及 「顯示品質類 (Display Quality)」的屬性也已於此篇文章做說明。 本篇接續前篇介紹 Media Features 媒體特性的顏色 (Color) 與互動 (Interaction): |
用來定義顏色 (Color) 的常見 Media Features 媒體特性一覽表
| 媒體特徵 | 說明 |
|---|---|
| color | 輸出裝置的色彩位元數。如果該裝置不是一個彩色的裝置，則值為 0 |
| color-index | 輸出裝置的色彩位元數。如果該裝置不是一個彩色的裝置，則值為 0 |
| monochrome | 輸出裝置的色彩位元數。如果該裝置不是一個彩色的裝置，則值為 0 |
| color-gamut 輸出裝置色域 |
輸出裝置色域，有三個選項介紹如下： srgb：sRGB 的意思是「標準 RGB」，為最早期的色域標準之一，絕大多數的顯示器都支援 sRGB。 p3 ：色域比 sRGB 更廣且包含 sRGB，是一種應用於數位電影的色域，是一套以人類視覺體驗為主導的色域標準。但是現在它也不是色域最廣的標準。 rec2020：色域比 p3 與 sRGB 更廣，且包含 p3 與 sRGB 的色域。rec2020 是 ITU 國際電信聯盟專門為現在的 HDTV 以及未來 UHD 電視（4K、8K）制定的標準 |
用來定義互動 ( Interaction ) 的常見 Media Features 媒體特性一覽表
| 媒體特徵 | 說明 |
|---|---|
| pointer、any-pointer 游標準確度 |
游標裝置 ( 例如滑鼠 ) 的準確性，有三個選項如下 none：表示沒有游標裝置 coarse ：表示精準度較差的游標裝置，例如觸控螢幕 |
| hover、any-hover hover 反應 |
簡單來說，hover 是在控制當滑鼠移至某元件時，某元件該如何反應。例如當滑鼠經過超連結文字時，該文字就會有變色的反應。有二個選項如下 none：表示沒有 hover hover：表示有 hover 反應 |
其實 CSS Media Query 對於許多前端工程師來說並不複雜，大多數的狀況其實都只是在應付 RWD響應式網頁需要注意螢幕尺寸的特性。也就是說， 網頁設計 只要注意 max-width、min-width 等視窗/網頁尺寸 (Viewport / Page Dimensions) 的 media features 就能解決各種裝置的狀況。至於其他的 media features (就是本篇提到的這些屬性等) 多是應付特殊的狀況，如單色的螢幕、超過範圍的區塊等等。總而言之，對於撰寫一個 RWD響應式網頁，善用 Media Query 是必備的技能！
相關文章
前端工程師的RWD基礎課程(5)and/not/only判斷條件
前端工程師的RWD基礎課程(6)Media Features-上
前端工程師的RWD基礎課程(8)流動圖片
想成為前端工程師你,必須知道的事有這些!
想要逼真的翻頁效果卻不知怎麼做? HTML5教學6種模式讓你自由搭配!!
Python課程竟也能教你用AI人工智慧寫出一本暢銷書?
HTML5教學-CSS初學者計畫之想跟我玩文字遊戲?想得美!
