CSS3 Media Queries 響應式網站設計的必備知識

媒體特性（Media Query）
前面有簡單的提到，Media Query是CSS3 對Media Type的增強版，其實可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規則)，常用的特性w3c共列出來13種。詳細內容可以參閱：Media features。我們直接從範例來加速對於Media Query的理解：

上面剛剛提到的範例：

1. <link rel="stylesheet" media="screen and (max-width: 500px)" href="style1.css" />

複製代碼

轉換成css中的寫法為：

1. @media screen and (max-width: 500px) {
   
2.     目標的ID或類型 {
   
3.       屬性：屬性值；
   
4.     }
   
5.   }

複製代碼

其實就是把style1l.css文件中的樣式內容放在了@media srceen and (max-width;600px){...}的大括號之中。在語句上面的語句結構中，可以看出Media query 和 css 的屬性集合很相似，主要區別在於Media query只接受單個的邏輯表達式作為其值，或者可以沒有值；Media Query是一個用於判斷輸出設備是否滿足某種條件的表達式；Media Query其中的大部分接受min/max前綴，用來表示其邏輯關係，表示應用於大於等於或者小於等於某個值的情況。

各瀏覽器對於Media Query的支援


下面就來直接看一下 Media Query 的各種實際應用方式：
一、最大寬度Max Width

1. <link rel="stylesheet" media="screen and (max-width:500px)" href="style1.css" type="text/css" />

複製代碼

說明：當螢幕視窗寬度小於或等於500px時，將採用style1.css樣式來渲染Web頁面。

二、最小寬度Min Width

1. <link rel="stylesheet" media="screen and (min-width:900px)" href="style2.css" type="text/css"  />

複製代碼

說明：當螢幕視窗寬度大於或等於900px時，將採用style2.css樣式來渲染Web頁面。

三、多條件 Media Queries使用

1. <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:1000px)" href="style.css" type="text/css" />

複製代碼

說明：當螢幕視窗大小在600px-1000px之間時採用style.css樣式來渲染web頁面。

四、設備螢幕的輸出寬度Device Width

1. <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="style3.css" type="text/css" />

複製代碼

device-width 指的是使用者的「裝置」最大寬度，而不是瀏覽器視窗。所以，device-width 常用在判斷手機上。上面的範例意思是，當瀏覽裝置的最大寬度為480px時，使用style3.css來渲染Web頁面。

我該如何針對各種裝置撰寫判斷式 ? 利用 Media Query Snippets 幫助你
Media Query Snippets 網站中蒐集了包含各種螢幕解析度、行動裝置、平板、的 @media 條件式，你可以直接查詢來使用。


之前看到網路有朋友介紹使用 Bootstrap這個framework來設計網站達到響應式設計效果，因為它已經幫你把很多版面在不同裝置的顯示效果設定好，有興趣的朋友可以直接去google找教學玩玩看喔 :)

Bootstrap(中文官網)：http://www.bootcss.com/

  12