前端工程師學習Media Query之路不孤單之媒體特性-下

前端工程師學習Media Query之路不孤單之媒體特性-下

前端工程師學習Media Query之路不孤單之媒體特性-下
前端工程師學習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教學」系列文章第七篇,全系列文章如下:

前端工程師的基礎RWD教學系列文章目錄

 

  1. 前端工程師的基礎RWD教學(一)RWD基礎概念
  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 

 

快來看延伸閱讀!

前端工程師學習Media Query的路上不孤單之媒體特性-上

三個技能讓你成為專業前端工程師-來認識RWD!

三個技能讓你成為專業前端工程師-Media Query

不懂網路行銷課程的”黑帽”跟”白帽”,小心吃虧的是你!

怎樣提升AI時代競爭力?!來上Python課程就對了!

全球最大零售業也瘋人工智慧!靠智能就能偵測缺貨標錯價!

達內課程先就業再付款- 中時電子報

發佈留言

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