|
【前文提要】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教學」系列文章第六篇，全系列文章如下:
其他閱讀
最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!
著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!
想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!
留言列表
