CSS語法

前端工程師的RWD小教室(七)Media Features下

2019-05-08

前端工程師教你RWD媒體特性的顏色與互動!

前端工程師教你RWD媒體特性的顏色與互動!
前端工程師教你RWD媒體特性的顏色與互動!

 
 

【前文提要】何謂 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小教室(五)and/not/only判斷條件

 

前端工程師的RWD小教室(六)Media Features-上

 

前端工程師的RWD小教室(八)流動圖片

 

想把握AI人工智慧就業機會,學習Python課程準沒錯!

 

Python課程創造新世界!! 日本AI人工智慧車輛研究中心新啟用!!

 

聰明絕頂的AI智慧也需要老師? AI不只需要Python課程,還有他們!!

 

想要SEO優化做得好,就不能不知道HTML語意標記的作用!

 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *