Media Queries 中文翻為『媒體查詢』，作用在偵測輸出裝置，它是由一個媒體類型（media type）與零到多個用於檢查特定條件的媒體功能（media features）組合而成。

在 W3C 文件中有列出支援的裝置，媒體類型的HTML4的完整列表是：

• all - 所有的裝置
• aural - 聽覺裝置
• braille - 盲文點字機
• handheld - 手持裝置
• print -印表機輸出設備
• projection - 投影輸出設備
• screen - 電腦螢幕
• tty - 聽障人士使用的 Teletype 機器
• tv - 電視

CSS2定義了相同的列表，不過拿掉了 aural 並增加了

• embossed - 盲文印表機
• speech - 朗讀裝置

而在網頁上常用的為 all 、 screen 、 print

使用 Media 的方式

HTML

//單純給予裝置
<link rel="stylesheet" media="screen" href="style.css" />

//給予裝置與條件
<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 700px)" href="style.css" />

CSS

直接寫在 css 檔案內

@media screen {
  * { font-family: sans-serif; }
}

在 css 內使用 @import 的方式

/* 在螢幕寬度 400px 以上，就會匯入 color.css */
@import url(color.css) screen and (min-width: 400px);

Queries 的使用方式

Query 的使用方式有三種：and not only

and

• 單一條件

/*如果螢幕寬度為 768px 以下，就套用 css 設定*/
@media screen and (max-width:768px) { 
  ...
}

• 兩個條件同時符合

/*如果螢幕寬度為 400px 以上 且 700px 以下，就套用 css 設定*/
@media screen and (min-width: 400px) and (max-width: 700px){ 
  ...
}

• 兩個條件其中一個符合

/*如果是彩色螢幕 或 彩色投影機設備，就套用 css 設定 */
@media screen and (color), projection and (color) { 
  ...
}

not

not 是用來排除所選擇的特定媒體

/*如果是彩色螢幕不套用 css 設定，印表機才套用*/
@media not screen and (color), print and (color) { 
  ...
}

only

only 是用來定特殊的媒體類型

<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />

上面是最基本的介紹，更多的 Media Queries 相關使用可以參考 W3C，下面要來說說 min-width 與 max-width

min-width 與 max-width

剛開始在學 media query 的時候常常搞不清楚 min-width 與 max-width 要怎麼用，主要是不了解他所涵蓋的範圍與怎麼涵蓋。

• max-width，表示這個數字以下（包含） 的都適用。(<=)
• min-width，表示這個數字以上（包含） 的都適用。(>=)

上面這兩句很重要、上面這兩句很重要、上面這兩句很重要，所以講三次XDDD
搞不清楚以上、以下，寫條件範圍就容易出錯。

至於條件範圍需要寫到多細，取決於客戶的需求，所以合約上也需要註明製作出來的網頁需要有幾各媒體查詢，例如：for 桌機、 for 桌機與手機、for 桌機、手機、平板等。

最早在寫 RWD 網頁時，我只用 max-width 來寫，css 會長成下面這樣

@media (max-width: 1200px) {...}

@media (max-width: 992px) {...}

@media (max-width: 768px) {...}

@media (max-width: 480px) {...}

那時候的寫法是以桌機為主，然後再慢慢往其他更小的裝置尺寸做調整。

後來開始有人推廣 mobile first，media query 會變成這樣寫：

@media (min-width: 576px) { ... }

@media (min-width: 768px) { ... }

@media (min-width: 992px) { ... }

@media (min-width: 1200px) { ... }

用這兩種寫法其實網頁也沒出過任何問題，只是 媒體查詢範圍重複 而已。
以下這種是 Bootstrap 的其中一種 media query 寫法，將查詢範圍區分開來。

@media (max-width: 575.99px) { ... }

@media (min-width: 576px) and (max-width: 767.99px) { ... }

@media (min-width: 768px) and (max-width: 991.99px) { ... }

@media (min-width: 992px) and (max-width: 1199.99px) { ... }

@media (min-width: 1200px) { ... }

其實只要了解 media query 的條件範圍使用方式，用哪一種寫法都是很OK的。
最怕是不了解條件範圍的使用，寫到最後還要打掉重寫。
以上是今天的 Media Queries 介紹，各位看倌明天見囉～

參考資料：
[1] Media Queries - w3.org
[2] Using media queries - MDN
[2] Media Query 小撇步