初階前端工程師常識集(五)-媒體特徵介紹<上>



 
初階前端工程師常識集(五)-媒體特徵介紹<上>
對剛接觸前端工程師課程的我,總是搞不懂媒體特徵的到底重要在哪?於是上網查了一下才發現...

【前文提要】RWD 網頁設計必備語法:Media Query
前端工程師在製作 RWD 響應式網頁時,一定會用到的 CSS 語法就是 Media Query。簡單來說,我們可以把 Media 視為 CSS 的擴充元件(這樣會比較好理解)。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的 Media Type),再針對這些類型 (Media Type) 定義其樣式 (Media Feature),而這個樣式就是所謂的「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 媒體特性 - 視窗與頁面尺寸 (Viewport/Page Dimensions)

媒體特徵 說明
device-height 裝置螢幕高度
max-device-height 裝置螢幕高度小於或等於...
min-device-height 裝置螢幕高度大於或等於...
device-width 裝置螢幕寬度
max-device-width 裝置螢幕寬度小於或等於...
min-device-width 裝置螢幕寬度大於或等於...
height 視窗高度
max-height 視窗高度小於或等於...
min-height 視窗高度大於或等於...
width 視窗寬度
max-width 視窗寬度小於或等於...
min-width 視窗寬度大於或等於...
orientation 螢幕旋轉方向,可設定 portrait ( 直向 ) 與 landscape ( 橫向 )
aspect-ratio 螢幕長寬比例,寫法格式為 「長/寬」,如 1680/720。
可寫成 max-aspect-ratio (最大長寬比) 或 min-aspect-ratio (最小長寬比)

Media Features 媒體特性 - 顯示品質 (Display Quality)

媒體特徵 說明
resolution 解析度,單位為 dpi、ppx 等
字首加「max-」為 max-resolution (最大解析度) 
字首加「min-」為 min-resolution (最小解析度)
scan 顯示器掃描線的方式,有兩個選項:interlace 和 progressive。
其值等同於 1080i 和 1080p 的字尾英文意思:
interlace 為奇數偶數掃描線交錯的方式,progressive 為漸進式掃描,是現在大多數電視採用的方式 )
update 媒體更新,有三個選項:none、slow 和 fast
none 表示無法更新的裝置,如印出來的文件
slow 表示更新速度慢的顯示裝置,如亞馬遜 Kindle 等裝置
fast 表示更新速度快的裝置,如電腦螢幕
overflow-block
區塊溢出
當區塊元素 ( 如 <div> 、<p>、<h1>-<h6>、<table> 等 ) 超過邊界範圍時用,有四個選項介紹如下: 
overflow-block: none:超過邊界的部分就不顯示 
overflow-block: scroll:可使用 scroll 捲軸查看超過邊界的部分 
overflow-block: paged:超出的內容會顯示在下一頁
overflow-block: optional-paged:可滾動查看超出範圍,且可手動設定超出的內容要從哪裡從哪裡開始在下一頁顯示 (如使用 break-inside 指令)。
overflow-inline: scroll
行內溢出
當行內元素 ( 如 <br> 、<img>、<strong> 等) 超過邊界範圍時用,有二個選項介紹如下: 
overflow-block: none:超過邊界的部分就不顯示 
overflow-block: scroll:可使用 scroll 捲軸查看超過邊界的部分

其實 CSS Media Query 對於許多前端工程師來說並不複雜,大多數的狀況其實都只是在應付 RWD響應式網頁需要注意螢幕尺寸的特性。也就是說,對前端工程師而言,在網頁設計的同時,只要注意 max-width、min-width 等視窗/網頁尺寸 (Viewport / Page Dimensions) 的 media features (就是本篇提到的這些屬性等) 就能解決各種裝置的狀況。至於其他的屬性 (請參考此篇) 多是應付特殊的狀況,如單色的螢幕、超過範圍的區塊等等。總而言之,對於撰寫一個 RWD響應式網頁,善用 Media Query 可是必備的技能!


本篇為「前端工程師的基礎RWD教學」系列文章第六篇,全系列文章如下:
前端工程師的基礎RWD教學系列文章目錄

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





更多閱讀:
初階前端工程師常識集(六)-媒體特徵介紹<下>


初階前端工程師常識集(四)-流動圖片如何設定?


前端工程師除了RWD別無選擇?選對方法就可以辦到SEO無痛!


達內教育開幕 培養台灣IT人才進入全球企業


神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?


快來搞清楚網路行銷裡的SEO黑帽跟白帽,誤入歧途可得不償失


OpenAI創辦人馬克思要離開自己的人工智慧團隊!發生什麼事?


熱門文章