前端工程師之路現在開始-Media Query的媒體特性-下
前端工程師學習Media Query的媒體特性,一篇怎麼夠?大補帖第二彈點進來馬上索取!
| 【前文提要】何謂 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 媒體特性的互動 (Interaction)與顏色 (Color) ： |
用來定義互動 ( Interaction ) 的常見 Media Features 媒體特性一覽表
| 媒體特徵 | 說明 |
|---|---|
| pointer、any-pointer 游標準確度 |
游標裝置 ( 例如滑鼠 ) 的準確性，有三個選項如下 none：表示沒有游標裝置 coarse ：表示精準度較差的游標裝置，例如觸控螢幕 |
| hover、any-hover hover 反應 |
簡單來說，hover 是在控制當滑鼠移至某元件時，某元件該如何反應。例如當滑鼠經過超連結文字時，該文字就會有變色的反應。有二個選項如下 none：表示沒有 hover hover：表示有 hover 反應 |
用來定義顏色 (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）制定的標準 |
其實 CSS Media Query 對於許多前端工程師來說並不複雜，大多數的狀況其實都只是在網頁設計時，需要應付 RWD響應式網頁而不得不注意螢幕尺寸的特性。也就是說，只要注意 max-width、min-width 等視窗/網頁尺寸 (Viewport / Page Dimensions) 的 media features ，你的網頁設計就較能解決各種裝置的狀況。至於其他的 media features (就是本篇提到的這些屬性等) 多是應付特殊的狀況，超過範圍的區塊、單色的螢幕等等。
總而言之，對於撰寫一個 RWD響應式網頁，不要小看 Media Query ，它絕對是必備的技能！
本篇為「前端工程師的基礎RWD教學」系列文章第七篇，全系列文章如下:
🙋延伸閱讀區：
前端工程師之路現在開始-Media Query的媒體特性-上
影響前端工程師超大的3個必備技能1-RWD是什麼何方神聖?
影響前端工程師超大的3個必備技能2-Media Query
不用半年,我就學透紮實的Python課程,我自己都嚇一大跳!
網路行銷課程進階(七)-擴大主題關鍵字,讓更多人看到你!!
教你為網站妝模作樣的CSS網頁設計課程
中國IT教育領導品牌 達內教育集團第一家海外授權中心
