前端工程師在網頁設計的時候要注意一些事情,比如說媒體特性,但這是什麼呢?讓我們看下去!!

前端工程師在網頁設計的時候要注意一些事情,比如說媒體特性,但這是什麼呢?讓我們看下去!!

【前文提要】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 區塊溢出 當區塊元素 ( 如 &ltdiv&gt 、&ltp&gt、&lth1&gt-&lth6&gt、&lttable&gt 等 ) 超過邊界範圍時用,有四個選項介紹如下: overflow-block: none:超過邊界的部分就不顯示 overflow-block: scroll:可使用 scroll 捲軸查看超過邊界的部分 overflow-block: paged:超出的內容會顯示在下一頁 overflow-block: optional-paged:可滾動查看超出範圍,且可手動設定超出的內容要從哪裡從哪裡開始在下一頁顯示 (如使用 break-inside 指令)。
overflow-inline: scroll 行內溢出 當行內元素 ( 如 &ltbr&gt 、&ltimg&gt、&ltstrong&gt 等) 超過邊界範圍時用,有二個選項介紹如下: 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

推薦閱讀:

免費HTML5教學(上):網路行銷如虎添翼

免費HTML5教學(中):助SEO優化一臂之力

免費HTML5教學(下):各式標籤隨你標

厭世代正風行?來上Java課程可以幫你扭轉困境!

高薪像做夢?!Java課程讓你夢想成真!

信不信由你,因為Java課程讓我獲得我想要的生活!

還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()