「Responsive Web Design」這個觀念與技術已經發展一段時間了，但這一年幾乎荒廢了我的 Html/CSS 學習之路，所以對於 Responsive web design 的觀念仍是懵懵懂懂，但 Google 是萬能的，所以根據強大的 wikipedia 幫我們簡單的定義了何謂 Responsive Web Design：

A site designed with RWD uses CSS3 media queries, an extension of the @media rule, to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images.
(網站使用 CSS3 media queries (使用方法為 @media +各種規則)，調整我們設計的版面。讓版面更加彈性，可以在不同的設備上瀏覽網站。)

Responsive web design - Wikipedia, the free encyclopedia

也就是說，如果做出一個 Responsive web design (以下簡稱 RWD) 非常良好的網站，我們要先會運用 @media 這個新的 CSS3 的屬性。因此我花了一些時間，想先了解 @media 可以怎麼用? 會有怎樣的效果? 假使你跟我一樣，對 @media 懵懵懂懂還摸不著邊際，歡迎跟我一起學習；假使你已經是 RWD 大師，也歡迎幫我看看，我這樣的學習筆記認知，在觀念或是應用上有甚麼需要改進的地方 😀

Media Queries 介紹與基礎應用

Media 跟 Queries，我們可以先把它拆成兩塊來看：

基本呼叫 Media 的方法

@media 是 CSS 擴充元件的寫法之一，我們可以把它當成是 CSS 的類別，可能會比較好懂。 @media 呼叫方法有三種，範例如下：

1. HTML 在呼叫 CSS 的時候，將 media 的條件加入：

<!-- 這段話表示 當螢幕寬度在 400px ~ 700px 之間，我們就會使用 test.css 這個檔案 -->
<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 700px)" href="test.css">

哈，是不是很有 IE Conditional Comments 的 FU。扯遠了，拉回~

2.直接寫在 css 檔案裡：

/* 直接將 media 的條件寫在 CSS 裡，裡面包的是各種 class / ID 的 css 設定 */
@media screen and (min-width: 400px) and (max-width: 700px) {
  a {
     color: red;}
  .entry {
     margin-top: 10px;
     font-size: 20px;}
}

3.使用 @import：

/* 在 CSS 裡使用 @import。
以下解釋為當螢幕寬度在 400px ~700px 之間，就會將 test.css 的檔案呼叫匯入，並套用設定。 */
@import "test.css" screen and (min-width: 400px) and (max-width: 700px)

Queries 基本使用方法

Query 顧名思義就是「查詢」的意思，我們如果要非常熟練的運用 media，各種條件跟條件之間的查詢是不可或缺的。

像是前面範例運用的 (min-width: 400px) and (max-width: 700px) ，那個「and」就是 Query 的一種。

Query 的語法只有三大項：not, and, only。我們最常用的是「and」，不難記，中文解釋也很簡單，比較困難的是，要怎麼加你心中設想的條件，用成語法呈現出來，所以要有一點邏輯概念會比較好上手。而這三種查詢條件可以獨立存在，也可以同時存在，只要用「,」隔開條件串即可。

1. and 使用方法：

• 單一條件：

/* 如果螢幕寬度為 500px (含) 以上，就套用這些 css 設定 */
@media screen and (min-width:500px) { 
  css 設定寫在此
}

/* 如果螢幕視窗為直立，就套用這些css設定
螢幕視窗橫向說法: orientation:landscape */
@media screen and  (orientation: portrait) {
  css 設定寫在此
}

• 同時符合兩種條件：

/* 螢幕寬度在 400px ~ 700px 之間，就套用這些 css 設定 */
@media screen and (min-width: 400px) and (max-width: 700px) {
  css 設定寫在此
}

• 兩種條件，符合一種即可

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

2. only 使用方法：

有的瀏覽器並不支援 Media Queries，但支援 Media Type，所以我們可以用 only 來阻擋這些瀏覽器。

<link rel="stylesheet" type="text/css" href="test.css" media="only screen and (color)">

以上這段語法的意思為：

• 支援 Media Queries & Media Type 的瀏覽器：如果是彩色螢幕，就會讀取 test.css。
• 不支援 Media Queries，但支援 Media Type 的瀏覽器：因為有寫 only 條件，所以不會往下讀「彩色螢幕」，所以不會呼叫 test.css
• 不支援 Media Queries & Media Type 的瀏覽器：不管有沒有 only，都不會呼叫 test.css

3. not 使用方法：

not 是用來排除某些設備的樣式，假設你希望這個樣式只在 A 設備有作用， B 設備完全沒用，就可以使用 not 囉。

舉例如下：

/*彩色螢幕不會套用 css 設定，彩色印表機會套用 css 設定*/
@media not screen and (color), print and (color) {
  css 設定寫在此
}

我們也可以換個寫法，用數學運算子的括號先決，應該會比較清楚：@media (not (screen and (color))), print and (color)

Media 支援 type 與 features (值)

Media Type

Media 常見的支援裝置有: all, screen, print ，以下列出所有支援的裝置類型(by @W3C):

• all ：所有可適用的裝置。
• braille ：盲人點字器。
• embossed ：盲人點字印表機。
• handheld ： 手機/ PDA裝置。
• print ：印表機列印輸出。
• projection ：全螢幕投影輸出。
• screen ：一般電腦螢幕 (含iphone, ipad)。
• speech ：朗讀式裝置。
• tty ：由文字長度決定大小的終端機裝置。
• tv ：電視。

Media Feature

• width | min-width | max-width
  (寬度 | 最小寬度 | 最大寬度)
• height | min-height | max-height
  (高度 | 最小高度 | 最大高度)
• device-width | min-device-width | max-device-width
  (裝置寬度 | 裝置最小寬度 | 裝置最大寬度)
• device-height | min-device-height | max-device-height
  (裝置高度 | 裝置最小高度 | 裝置最大高度)
• orientation (value: portrait | landscape)
  (裝置旋轉方向 值:直立 | 橫向)
• aspect-ratio | min-aspect-ratio | max-aspect-ratio
  (螢幕顯示比例 | 螢幕顯示最小比例 | 螢幕顯示最大比例)
• device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  (裝置顯示比例 | 裝置顯示最小比例 | 裝置顯示最大比例)
• color | min-color | max-color
  (彩色 | 最小顏色bit數 | 最大顏色bit數)
  color:0 表示該裝置為黑白(單色)
• color-index | min-color-index | max-color-index
• monochrome | min-monochrome | max-monochrome
  (單色 | 最小單色bit數 | 最大單色bit數)
  monochrome :0 表示該裝置不是黑白(單色)
• resolution | min-resolution | max-resolution
  (解析度 | 最小解析度 | 最大解析度)
• scan (value:progressive | interlace)
  (TV 專用掃描)
• grid

寫到這覺得篇幅好像過長，而且大家消化也需要一點時間，關於 Media Queries 更進階的運用，以及權重說明，等我更加瞭解後，再整理一份給大家參考吧!!

其實如同我開頭所言，RWD 的技術已經蠻成熟了，也許我這篇教學已經來的有點晚，網路上已經有很多相關應用與例子，不過還是希望經過我這樣的說明，大家可以更瞭解 Media Queries 的使用方法 😀

Media Queries 參考資料
1. [CSS] Media Query 小撇步 // HINA::工程幼稚園
2. Mobile Web 前端技術筆記(二): Media Queries 與 CSS // 烏托比亞
3. CSS3 Media Queries 詳解 // 池水間
4. CSS media queries // CSS | MDN
5. Media Queries // W3C

1

1

發生錯誤。