前端工程師基本RWD教學(七)Media Query之媒體特性-上
前端工程師基本RWD教學(七)Media Query之媒體特性-上

前端工程師基本RWD教學(七)Media Query之媒體特性-上

前端工程師基本RWD教學(七)Media Query之媒體特性-上

想當前端工程師發大財的你,必備的RWD基礎要熟透透,本篇將著重Media Query之媒體特性(上篇).
 
 

 

【前文提要】RWD 網頁設計必備語法:Media Query
前端工程師在製作 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 媒體特性 – 視窗與頁面尺寸 (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教學(一)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

 

 

參考來源:

前端工程師基本RWD教學(五)Media Query之媒體類型

前端工程師基本RWD教學(六)Media Query之判斷條件

前端工程師基本RWD教學(八)Media Query之媒體特性-下

字體單位好簡單? 讓前端工程師來幫你打好基礎!(絕對單位篇)

字體單位好簡單? 讓前端工程師來幫你打好基礎!(相對單位篇)

前端工程師設定CSS背景的五種方法(一)背景固定模式設定

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

最後修改日期: 2019-05-23