關於前端工程師必備的技能有很多,今天要告訴大家有關RWD教學裡的Media Query之媒體特性(下篇).
【前文提要】何謂 Media Query 與 Media Feature? 而 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教學」系列文章第七篇,全系列文章如下:
參考連結: