
只要前端工程師在運用Media Query時,都要先指定媒體類型(media type),目前有百百種,快來一起增加知識!
【前文提要】在網頁設計裡,何謂 Media Query 與 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)。and/not/only 判斷條件於本篇文章做說明,而媒體特徵 (Media Feature) 的各式屬性也於此篇(頁面尺寸與顯示品質的屬性)與此篇(「顏色類」和「互動類」的屬性)列出。本篇就針對媒體類型 (Media Type) 說明如下: |
這篇就直接開門見山了!
請看下方表格,是前端工程師在運用 Media Query 時,首先要指定媒體類型 (media type) 種類,是不是很多種?
媒體類型(media type) | 簡介 |
---|---|
all | 所有裝置 |
screen | 螢幕裝置 ( 除了 print 和 speech 之外的設備 ) 大小 |
印表機裝置 (包含使用列印預覽所產生的畫面,如列印為 pdf) | |
projection | 投影機裝置 |
speech | 朗讀裝置 (針對可「讀出」網頁的設備) |
本篇為「前端工程師的基礎RWD教學」系列文章第四篇,全系列文章如下:
快來看延伸閱讀!
前端工程師學習Media Query之路不孤單之CSS條件判斷
在做網路行銷?HTML5教學不可少(中):認識HTML表格標籤