前端工程師不可不知的語法(二):Media Query先備知識

前端工程師一定要瞭解會用到的語法,但是呢必須要有一定的先備知識!!讓我們來揭開神秘的面紗吧!!

【前文提要】RWD 網頁設計必備語法：Media Query 前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好瞭解）。而 Media 後面多加一個「Query」代表在網頁設計的時候會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的Media Type，也是本篇文章講解重點)，再針對這些 Media Type 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。參考文章：如何在RWD網頁中套用Media Query語法而 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 之外的設備 ) 大小
print	印表機裝置 (包含使用列印預覽所產生的畫面，如列印為 pdf)
projection	投影機裝置
speech	朗讀裝置 (針對可「讀出」網頁的設備)

本篇為「前端工程師的基礎RWD教學」系列文章第四篇，全系列文章如下:

前端工程師的基礎RWD教學系列文章目錄

生活必備咖啡因程式碼-店長Yui大小事