RWD 網頁設計必備語法：Media Query
前端工程師在設計製作 RWD 響應式網頁時，相信都一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media ' 當作為 CSS 的擴充元件（這樣會比較好理解）。而在 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的Media Type，也是本篇文章講解重點)，最後再針對這些 Media Type 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。Media Query 使用方法
如果要使用 Media Query ，則使用方式有下列三種：1. 在 HTML5 中使用，以下範例為用 media 屬性判斷使用者的裝置大小：當螢幕小於 400 px 時，套用指定的 CSS 檔案「Screen.css」：
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="Screen.css">
2. 上面的功能，若使用 CSS 中使用，則為：＠media screen and (max-device-width: 400px){...}
3. 你也可使用 @import@import "screen.css" screen and (max-device-width: 400px)
看了以上 Media Query 的使用方法後，你會發現以上三種的範例中包含了「screen」、「and」和「max-device-width: 400px」。這三者分別為「媒體類型(media type)」、「判斷條件 (and/not/only)」和「媒體特徵 (media feature)」。媒體類型(media type)於此篇文章做說明、and/not/only 判斷條件於本篇文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於此篇（頁面尺寸與顯示品質的屬性）與此篇（「顏色類」和「互動類」的屬性）列出。本篇為「前端工程師的基礎RWD教學」系列文章第三篇，全系列文章如下:
參考連結:
前端工程師入門RWD教學(一)基礎概念
前端工程師入門RWD教學(二)流動布局
前端工程師入門RWD教學(四)流動圖片Fluid Image
前端工程師初學者第三課:ID選擇器怎麼用?
網頁顏色代碼為何總是散亂!?為了前端工程師,這裡幫你整理啦~
攜手惠普和英特爾,達內教育又創新的巔峰!
達內課程先就業再付款- 中時電子報
前端工程師入門RWD教學(二)流動布局
