### Media Queries——媒體類型
> 隨著科學技術不斷的向前發展，網頁的瀏覽終端越來越多樣化，用戶可以通過：寬屏電視、臺式電腦、筆記本電腦、平板電腦和智能手機來訪問你的網站。盡管你無法保證一個網站在不同屏幕尺寸和不同設備上看起來完全一模一樣，但至少要讓你的Web頁面能適配用戶的終端，讓他更好的呈現在你的用戶面前。在本節中，將會學到如何使用CSS3中的Media Queries模塊來讓一個頁面適應不同的終端（或屏幕尺寸），從而讓你的頁面讓用戶有一個更好的體驗。
Media Queries
`Media Queries`是CSS3新增加的一個模塊功能，其最大的特色就是通過CSS3來查詢媒體，然后調用對應的樣式。其實這個功能在CSS2.1中就有出現過，只不過那個時候此功能并不強大，我們最常見的就是給打印設備添加打印樣式。隨著時代的變化，這個模塊功能越來越強大。
在徹底的了解`Media Queries`我們需要了解其中的兩個重要部分，第一個是媒體類型，第二個是媒體特性。下面的內容我們簡單的來了解這兩個部分：
一、媒體類型
媒體類型（Media Type）在CSS2中是一個常見的屬性，也是一個非常有用的屬性，可以通過媒體類型對不同的設備指定不同的樣式。
在CSS2中常碰到的就是`all`(全部)、`screen`(屏幕)、`print`(頁面打印或打印預覽模式)，其實媒體類型遠不止這三種，W3C總共列出了10種媒體類型。如下表所示：
值|設備類型
---|---
All|所有設備
Braille|盲人用點字法觸覺回饋設備
Embossed|盲文打印機
Handheld|便攜設備
Print|打印用紙或打印預覽視圖
Projection|各種投影設備
Screen|電腦顯示器
Speech|語音或音頻合成器
Tv|電視機類型設備
Tty|使用固定密度字母柵格的媒介，比如電傳打字機和終端
其中`Screen`、`All`和`Print`為最常見的三種媒體類型。
在實際中媒體類型有近十種之多，實際之中常用的也就那么幾種，不過媒體類型的引用方法也有多種，常見的有：`link`標簽、`@import`和CSS3新增的`@media`幾種：
#### link方法
`link`方法引入媒體類型其實就是在`<link>`標簽引用樣式的時候，通過`link`標簽中的`media`屬性來指定不同的媒體類型。如下所示:
```html
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
```
#### @import方法
`@import`可以引用樣式文件，同樣也可以用來引用媒體類型。`@import`引入媒體類型主要有兩種方式，一種是在樣式中通過`@import`調用另一個樣式文件；另一種方法是在<head></head>標簽中的<style></style>中引入，但這種使用方法在IE6~7都不被支持，如樣式文件中調用另一個樣式文件時，就可以指定對應的媒體類型。
```html
@importurl(reset.css) screen;
@importurl(print.css) print;
```
在`<head>`中的`<style>`標簽中引入媒體類型方法。
```html
<head>
<style type="text/css">
@importurl(style.css) all;
</style>
</head>
```
#### @media方法
`@media`是CSS3中新引進的一個特性，被稱為媒體查詢。在頁面中也可以通過這個屬性來引入媒體類型。`@media`引入媒體類型和`@import`有點類似也具有兩方式。
* 在樣式文件中引用媒體類型：
```css
@media screen {
選擇器{/* 你的樣式代碼寫在這里… */}
}
```
* 使用`@media`引入媒體類型的方式是在`<head>`標簽中的`<style>`中引用。
```html
<head>
<style type="text/css">
@media screen{
選擇器{/* 你的樣式代碼寫在這里… */}
}
</style>
</head>
```
### Media Queries使用方法
> `Media Queries`能在不同的條件下使用不同的樣式，使頁面在不同在終端設備下達到不同的渲染效果
`Media Queries`的使用方法如下:
```css
@media 媒體類型 and （媒體特性）{你的樣式}
```
注意：使用`Media Queries`必須要使用`@media`開頭，然后指定媒體類型（也可以稱為設備類型），隨后是指定媒體特性（也可以稱之為設備特性）。媒體特性的書寫方式和樣式的書寫方式非常相似，主要分為兩個部分，第一個部分指的是媒體特性，第二部分為媒體特性所指定的值，而且這兩個部分之間使用冒號分隔。
```css
(max-width: 480px)
```
從前面表中可以得知，主要有十種媒體類型和13種媒體特性，將其組合就類似于不同的CSS集合。但與CSS屬性不同的是，媒體特性是通過`min/max`來表示大于等于或小于做為邏輯判斷，而不是使用小于（<）和大于（>）這樣的符號來判斷
* 最大寬度`max-width`
`max-width`是媒體特性中最常用的一個特性，其意思是指媒體類型小于或等于指定的寬度時，樣式生效。如：
```css
@media screen and (max-width:480px){
.ads {
display:none;
}
}
```
上面表示的是：當屏幕小于或等于480px時,頁面中的廣告區塊（.ads）都將被隱藏。
* 最小寬度min-width
`min-width`與`max-width`相反，指的是媒體類型大于或等于指定寬度時，樣式生效。
```css
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}
```
上面表示的是：當屏幕大于或等于900px時，容器`.wrapper`的寬度為980px。
* 多個媒體特性使用
`Media Queries`可以使用關鍵詞"and"將多個媒體特性結合在一起。也就是說，一個`Media Query`中可以包含0到多個表達式，表達式又可以包含0到多個關鍵字，以及一種媒體類型。
當屏幕在600px~900px之間時，body的背景色渲染為"f5f5f5"，如下所示。
```css
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
```
* 設備屏幕的輸出寬度Device Width
在智能設備上，例如iPhone、iPad等，還可以根據屏幕設備的尺寸來設置相應的樣式（或者調用相應的樣式文件）。同樣的，對于屏幕設備同樣可以使用“min/max”對應參數，如`min-device-width`或者`max-device-width`
```html
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
```
上面的代碼指的是`iphone.css`樣式適用于最大設備寬度為480px，比如說iPhone上的顯示，這里的`max-device-width`所指的是設備的實際分辨率，也就是指可視面積分辨率。
* not關鍵詞
使用關鍵詞`not`是用來排除某種制定的媒體類型，也就是用來排除符合表達式的設備。換句話說，not關鍵詞表示對后面的表達式執行取反操作，如：
```css
@media not print and (max-width: 1200px){樣式代碼}
```
上面代碼表示的是：樣式代碼將被使用在除打印設備和設備寬度小于1200px下所有設備中。
* only關鍵詞
`only`用來指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實`only`很多時候是用來對那些不支持`Media Query`但卻支持`Media Type`的設備隱藏樣式表的。其主要有：支持媒體特性的設備，正常調用樣式，此時就當`only`不存在；表示不支持媒體特性但又支持媒體類型的設備，這樣就會不讀樣式，因為其先會讀取`only`而不是`screen`；另外不支持`Media Queries`的瀏覽器，不論是否支持`only`，樣式都不會被采用。如
```html
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
```
在`Media Query`中如果沒有明確指定`Media Type`，那么其默認為`all`，如：
```html
<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />
```
另外在樣式中，還可以使用多條語句來將同一個樣式應用于不同的媒體類型和媒體特性中，指定方式如下所示。
```html
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
```
上面代碼中style.css樣式被用在寬度小于或等于480px的手持設備上，或者被用于屏幕寬度大于或等于960px的設備上。
到目前為止，CSS3 `Media Queries`得到了眾多瀏覽器支持，除了IE6-8瀏覽器不支持之外，在所有現代瀏覽器中都可以完美支持。還有一個與眾不同的時，`Media Queries`在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴。
### Responsive設計
> 什么是響應式設計呢？維基百科是這樣對響應式作的描述："Responsive設計簡單的稱為RWD，是精心提供各種設備都能瀏覽網頁的一種設計方法，RWD能讓你的網頁在不同的設備中展現不同的設計風格",從這一點描述來說，RWD不是流體布局，也不是網格布局，而是一種獨特的網頁設計方法。
響應式設計要考慮元素布局的秩序，而且還需要做到“有求必應”，那就需要滿足以下三個條件：網站必須建立靈活的網格基礎；引用到網站的圖片必須是可伸縮的；不同的顯示風格，需要在`Media Queries`上寫不同的樣式。
要想靈活的使用`Responsive`，僅滿足這幾個條件還是不夠的，我們必須對`Responsive`有一個全面的了解，那么要了解`Responsive`，就得先了解他的一些術語：
* 流體網格
流體網格是一個簡單的網格系統，這種網格設計參考了流體設計中的網格系統，將每個網格格子使用百分比單位來控制網格大小。這種網格系統最大的好處是讓你的網格大小隨時根據屏幕尺寸大小做出相對應的比例縮放。
* 彈性圖片
彈性圖片指的是不給圖片設置固定尺寸，而是根據流體網格進行縮放，用于適應各種網格的尺寸。而實現方法是比較簡單，一句代碼就能搞定的事情。
```css
img {max-width:100%;}
```
不幸的是，這句代碼在IE8瀏覽器存在一個嚴重的問題，讓你的圖片會失蹤。當然彈性圖片在響應式設計中如何更好的實現，到目前為止都還存在爭議，也還在不斷的改善之中。
為每一個斷點提供不同的圖片，這是一個比較頭痛的事情，因為`Media Queries`并不能改變圖片`src`的屬性值，那有沒有辦分法可以解決呢？可以參考一下下面的解決方法。使用`background-image`給元素使用背景圖片，顯示/隱藏父元素，給父元素使用不同的圖片，然后通過`Media Queries`來控制這些圖片顯示或隱藏。
來看一個斷點解決圖片自適應的例子。
```html
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />
```
對應的CSS代碼：
```css
@media (min-device-width:600px){
img[data-src-600px]{
content: attr(data-src-600px,url);
}
}
@media (min-device-width:800px){
img[data-src-800px] {
content:attr(data-src-800px,url);
}
}
```
請注意：這僅僅是解決響應式圖片自適應的一種思路，但這種方案僅僅適配的斷點較少。并不太實用，此處僅為擴展同學們的思路。
* 媒體查詢
媒體查詢在CSS3中得到了強大的擴展。使用這個屬性可以讓你的設計根據用戶終端設備適配對應的樣式。這也是響應式設計中最為關鍵的。可以說`Responsive`設計離開了`Medial Queries`就失去了他生存的意義。簡單的說媒體查詢可以根據設備的尺寸，查詢出適配的樣式。`Responsive`設計最關注的就是：根據用戶的使用設備的當前寬度，你的Web頁面將加載一個備用的樣式，實現特定的頁面風格。
* 屏幕分辨率
屏幕分辨簡單點說就是用戶顯示器的分辨率，深一點說，屏幕分辨率指的是用戶使用的設備瀏覽您的Web頁面時的顯示屏幕的分辨率，比如說智能手機瀏覽器、移動電腦瀏覽器、平板電腦瀏覽器和桌面瀏覽器的分辨率。`Responsive`設計利用`Media Queries`屬性針對瀏覽器使用的分辨率來適配對應的CSS樣式。因此屏幕分辨率在`Responsive`設計中是一個很重要的東西，因為只有知道Web頁面要在哪種分辨率下顯示何種效果，才能調用對應的樣式。
* 主要斷點
主要斷點，在Web開發中是一個新詞，但對于`Responsive`設計中是一個很重要的一部分。簡單的描述就是，設備寬度的臨界點。在`Media Queries`中，其中媒體特性'min-width'和'max-width'對應的屬性值就是響應式設計中的斷點值。簡單點說，就是使用主要斷點和次要斷點，創建媒體查詢的條件。而每個斷點會對應調用一個樣式文件（或者樣式代碼）
### Responsive布局技巧
通過上面的介紹，大家對響應式設計有了一定的了解，但在實際制作中還是有一些布局技巧的：
在Responsive布局中，可以毫無保留的丟棄：
* 盡量少用無關緊要的div；
* 不要使用內聯元素（inline）；
* 盡量少用JS或flash；
* 丟棄沒用的絕對定位和浮動樣式；
* 摒棄任何冗余結構和不使用100%設置。
有舍才有得，丟棄了一些對Responsive有影響的東東，那么有哪些東東能幫助`Responsive`確定更好的布局呢？
* 使用HTML5 Doctype和相關指南；
* 重置好你的樣式（reset.css）；
* 一個簡單的有語義的核心布局；
* 給重要的網頁元素使用簡單的技巧，比如導航菜單之類元素。
使用這些技巧，無非是為了保持你的HTML簡單干凈，而且在你的頁面布局中的關鍵部分（元素）不要過分的依賴現代技巧來實現，比如說CSS3特效或者JS腳本。
說了這么多，怎么樣的布局或者說HTML結構才是簡單干凈的呢？這里教大家一個快速測試的方法。你首先禁掉你頁面中所有的樣式（以及與樣式相關的信息），在瀏覽器中打開，如果你的內容排列有序，方便閱讀，那么你的這個結構不會差到哪里去。
### Responsive設計——meta標簽
最后還有一個不可或缺的東東，那就是meta標簽，可以說，在響應式設計中如果沒有這個meta標簽，你就是蹩腳的，響應式設計就是空談。
整個meta標簽被稱為可視區域meta標簽，其使用方法如下。
```html
<meta name=”viewport” content=”” />
```
在content屬性中主要包括以下屬性值，用來處理可視區域。
content屬性值|詳細描述
---|---
width|可視區域的寬度，其值可以是一個具體數字或關鍵詞device-width
height|可視區域的高度，其值可以是一個具體數字或關鍵詞device-height
initial-scale|頁面首次被顯示時可視區域的縮放級別，取值為1.0時將使頁面按實際尺寸顯示，無任何縮放
minimun-scale|可視區域的最小縮放級別，表示用戶可以將頁面縮小的程度，取值為1.0時將禁止用戶縮小至實際尺寸以下
maximun-scale|可視區域的最大縮放級別，表示用戶可以將頁面放大的程度，取值為1.0時將禁止用戶放大至實際尺寸以上
user-scalable|指定用戶是否可以對頁面進行縮放，設置為yes將允許縮放，no為禁止縮放
在實際項目中，為了讓`Responsive`設計在智能設備中能顯示正常，也就是瀏覽Web頁面適應屏幕的大小，顯示在屏幕上，可以通過這個可視區域的`meta`標簽進行重置，告訴他使用設備的寬度為視圖的寬度，也就是說禁止其默認的自適應頁面的效果，具體設置如下：
```html
<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
```
另外一點，由于`Responsive`設計是結合CSS3的`Media Queries`屬性，才能盡顯`Responsive`設計風格，但大家都清楚，在IE6-8中完全是不支持`CSS3 Media`。下面我們一起來看看`CSS3 Meida Queries`在標準設備上的運用，大家可以把這些樣式加到你的樣式文件中，或者單獨創建一個名為`responsive.css`文件，并在相應的條件中寫上你的樣式，讓他適合你的設計需求。
腳本下載地址：
```html
media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)
respond.js(https://github.com/scottjehl/Respond)
<!—[if lt IE9]>
<scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
<![endif]>
```
### Responsive設計——不同設備的分辨率設置
下面我們一起來看看`CSS3 Meida Queries`在標準設備上的運用，大家可以把這些樣式加到你的樣式文件中，或者單獨創建一個名為`responsive.css`文件，并在相應的條件中寫上你的樣式，讓他適合你的設計需求：
* 1024px顯屏
```css
@media screen and (max-width : 1024px) {
/* 樣式寫在這里 */
}
```
* 800px顯屏
```css
@media screen and (max-width : 800px) {
/* 樣式寫在這里 */
}
```
* 640px顯屏
```css
@media screen and (max-width : 640px) {
/* 樣式寫在這*/
}
```
* iPad橫板顯屏
```css
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* 樣式寫在這 */
}
```
* iPad豎板顯屏
```css
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* 樣式寫在這 */
}
```
* iPhone 和 Smartphones
```css
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* 樣式寫在這 */
}
```
