初階前端工程師常識集(五)-媒體特徵介紹<上>
對剛接觸前端工程師課程的我,總是搞不懂媒體特徵的到底重要在哪?於是上網查了一下才發現...
【前文提要】RWD 網頁設計必備語法：Media Query
前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的 Media Type)，再針對這些類型 (Media Type) 定義其樣式 (Media Feature)，而這個樣式就是所謂的「Media Feature (中文譯作「媒體樣式」或是「媒體特徵」)」。
前端工程師在製作 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別無選擇?選對方法就可以辦到SEO無痛!
達內教育開幕 培養台灣IT人才進入全球企業
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
快來搞清楚網路行銷裡的SEO黑帽跟白帽,誤入歧途可得不償失
OpenAI創辦人馬克思要離開自己的人工智慧團隊!發生什麼事?
