一、@media媒體查詢用途
媒體查詢Media Queries，可以根據不同的設備為其實現不同的樣式。@media可以根據不同的屏幕尺寸設置不同的樣式，頁面布局分別適應移動端、pc端等，在調整瀏覽器的大小，頁面會根據媒體的寬度和高度來重新布置樣式。
CSS2中使用的@media媒體查詢在很多設備上支持的還不夠友好，CSS3的多媒體查詢繼承了CSS2多媒體類型的所有思想，取代了查找設備的類型，CSS3根據設置自適應顯示。
媒體查詢可以用於檢測很多東西：自動檢測viewpoint（視窗）的寬度和高度；設備的寬度和高度；旋轉方向（智能手機橫屏或豎屏）；分辨率大小。
二、CSS3語法規則
（一）直接寫在css樣式中
@media mediatype and/not/only (media feature) { CSS-Code }
如何理解@media的語法規則：
使用媒體查詢必須是以 @media 開頭；
然后指定設備類型（媒體類型mediatype）；
接着是括號()里的規定媒體/設備特征（media feature），媒體特征的書寫格式與css樣式類似，都是屬性名：屬性值（例如min-width：200px）；
最后跟着的大括號{ css-code }，里面放置的是要設置的css樣式。
邏輯運算符：
not：用來排除某種設備。比如，排除打印設備 @media not print；
only：用以指定某特定媒體設備。對於支持 Media Queries 的移動設備來說，如果存在 only 關鍵字，移動設備的 Web 瀏覽器會忽略 only關鍵字並直接根據后面的表達式應用樣式文件。對於不支持 Media Queries 的設備但能夠讀取 Media Type 類型的 Web瀏覽器，遇到 only 關鍵字時會忽略這個樣式文件。
all：適用於所有的設備類型；
and：媒體查詢中使用來連接多種媒體特性,一個媒體查詢中可以包含0或多個表達式，表達式可以是0或多個關鍵字，以及一種媒體類型。
如：@media screen and (max-width:800px) and (min-width:400px)
（二） 針對不同的媒體設備外部鏈入不同的 stylesheets（外部樣式表）
<link rel="stylesheet" media="mediatype and|not|only (media feature)"href="mystylesheet.css">
定義媒體查詢的部分放在<link>標簽內，用media屬性標注，media=" 媒體類型 and/not/only（媒體特性）"
五、媒體特性 Media Feature
| 值 | 描述 |
|---|---|
| aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的比率 |
| color | 定義輸出設備每一組彩色原件的個數。如果不是彩色設備，則值等於0 |
| color-index | 定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0 |
| device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的比率。 |
| device-height | 定義輸出設備的屏幕可見高度。 |
| device-width | 定義輸出設備的屏幕可見寬度。 |
| grid | 用來查詢輸出設備是否使用柵格或點陣。 |
| height | 定義輸出設備中的頁面可見區域高度。 |
| max-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-color | 定義輸出設備每一組彩色原件的最大個數。 |
| max-color-index | 定義在輸出設備的彩色查詢表中的最大條目數。 |
| max-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-device-height | 定義輸出設備的屏幕可見的最大高度。 |
| max-device-width | 定義輸出設備的屏幕最大可見寬度。 |
| max-height | 定義輸出設備中的頁面最大可見區域高度。 |
| max-monochrome | 定義在一個單色框架緩沖區中每像素包含的最大單色原件個數。 |
| max-resolution | 定義設備的最大分辨率。 |
| max-width | 定義輸出設備中的頁面最大可見區域寬度。 |
| min-aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的最小比率。 |
| min-color | 定義輸出設備每一組彩色原件的最小個數。 |
| min-color-index | 定義在輸出設備的彩色查詢表中的最小條目數。 |
| min-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最小比率。 |
| min-device-width | 定義輸出設備的屏幕最小可見寬度。 |
| min-device-height | 定義輸出設備的屏幕的最小可見高度。 |
| min-height | 定義輸出設備中的頁面最小可見區域高度。 |
| min-monochrome | 定義在一個單色框架緩沖區中每像素包含的最小單色原件個數 |
| min-resolution | 定義設備的最小分辨率。 |
| min-width | 定義輸出設備中的頁面最小可見區域寬度。 |
| monochrome | 定義在一個單色框架緩沖區中每像素包含的單色原件個數。如果不是單色設備，則值等於0 |
| orientation | 定義輸出設備中的頁面可見區域高度是否大於或等於寬度。 |
| resolution | 定義設備的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 定義電視類設備的掃描工序。 |
| width | 定義輸出設備中的頁面可見區域寬度。 |
六、應用實例
了解了媒體類型和媒體特性，或發現其書寫類型和css樣式基本一致，但是在media queries中，使用max / min來表示大於等於小於以此作為邏輯判斷。而不是使用大於號>或小於號(<)符號進行判斷。來看一下具體實例：
（一）最小寬度min-width
min-width規則為：當媒體類型大於或是等於指定的寬度時，大括號內的樣式生效；
例：
1 body {
2 background-color:lightgreen;
3 }
4
5 @media screen and (min-width: 700px) {
6 body {
7 background-color:lightblue;
8 }
9 }
規定最小寬度為700px，當瀏覽器窗口的寬度大於或等於700px時，則主體區域的背景顏色變為 淡藍色。
若寬度小於700px，主體區域背景顏色保持原有樣式，顯示為為淡綠色。
（如果想讓lightblue生效，就必須使寬度大於或等於700px，700px以下的寬度無效。區間為[>700]）
（二）最大寬度max-width
max-width規則為：當媒體類型小於或是等於指定的寬度時，大括號內的樣式生效；
1 body {
2 background-color:lightgreen;
3 }
4
5 @media screen and (max-width: 700px) {
6 body {
7 background-color:lightblue;
8 }
9 }
規定最大寬度為700px，當瀏覽器窗口的寬度小於或等於700px時，則主體區域的背景顏色變為 淡藍色。
若寬度大於700px，主體區域背景顏色保持原有樣式，顯示為為淡綠色。
（如果想讓lightblue生效，就必須把寬度保持在700px之下，700px及更大的寬度無效。區間為[0，700]）
（三）同時設置多個媒體特性
使用and屬性來設置多個媒體特征。一個媒體查詢中可以包含0或多個表達式，表達式可以是0或多個關鍵字，以及一種媒體類型。
1 body {
2 background-color:lightgreen;
3 }
4 @media screen and (max-width: 1000px) and (min-width: 700px){
5 body {
6 background-color:lightblue;
7 }
8 }
最大寬度為1000px，最小寬度為700px，所以屏幕寬度要保持在大於等於700px且小於等於1000px的范圍內。背景顏色為淺藍色的設置才能生效。區間為[1000,700]。
同樣也可以同時設置多個媒體查詢
寬度大於1000px背景顏色淺綠色；寬度700px~1000px時背景顏色為淺藍色，寬度為699px~399px時背景顏色為紅色。
（四）輸出設備的屏幕可見寬度 device-width
在智能設備上，例如iPhone、iPad等，還可以根據屏幕設備的尺寸來設置相應的樣式（或者調用相應的樣式文件）。
width和height有可以指定最大最小值，同樣的，對於屏幕設備同樣可以使用“min/max”對應參數，如“min-device-width”或者“max-device-width”。
最大/最小屏幕可見寬度。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
表示外部樣式iphone.css適用於最大設備寬度為480px。device-width指的是設備的實際分辨率（可視面積的分辨率）
（五）not關鍵字
使用not關鍵字來排除某種所指定設備類型，排除后面表達式中的媒體類型。not表現的效果就是“非”，對后面跟着的表達式進行否定定義。
@media not print and（max-width：200px）{body{background：blue}}
樣式代碼將被使用在除打印設備和設備寬度小於200px下所有設備中。
（六）only關鍵字
only用來指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表的。
支持媒體特性的設備，正常調用樣式，此時就當only不存在；
表示不支持媒體特性但又支持媒體類型的設備，這樣就會不讀樣式，因為其先會讀取only而不是screen；
另外不支持Media Queries的瀏覽器，不論是否支持only，樣式都不會被采用
<!doctype html> <html lang="en"> <html> <mate charset="utf-8"> <head> <itile></itile> <style> .b1{width:300px; height:30px; background:red; } @media only screen and (max-width: 600px)and(min-width:300px;) { .b1 {background: red;} } @media only screen and (min-width: 600px) { .b1 {background: green;} } @media only screen and (min-width: 768px) { .b1 {background: blue;} } @media only screen and (min-width: 992px) { .b1 {background: orange;} } @media only screen and (min-width: 1200px) { .b1 {background: pink;} } </style> </head> <body> <div class="b1"></div> </body> </html>
上方式為媒體查詢的代碼