媒體查詢使用方法@media

Media Queries能在不一樣的條件下使用不一樣的樣式，使頁面在不一樣在終端設備下達到不一樣的渲染效果。前面簡單的介紹了Media Queries如何引用到項目中，但Media Queries有其本身的使用規則。具體來講,Media Queries的使用方法以下。

@media 媒體類型and （媒體特性）{你的樣式}

注意：使用Media Queries必需要使用「@media」開頭，而後指定媒體類型（也能夠稱爲設備類型），隨後是指定媒體特性（也能夠稱之爲設備特性）。媒體特性的書寫方式和樣式的書寫方式很是類似，主要分爲兩個部分，第一個部分指的是媒體特性，第二部分爲媒體特性所指定的值，並且這兩個部分之間使用冒號分隔。例如：

(max-width: 480px)
從前面表中能夠得知，主要有十種媒體類型和13種媒體特性，將其組合就相似於不一樣的CSS集合。
但與CSS屬性不一樣的是，媒體特性是經過min/max來表示大於等於或小於作爲邏輯判斷，
而不是使用小於（<）和大於（>）這樣的符號來判斷。接下來一塊兒來看看Media Queries在實際項目中經常使用的方式。

1. 最大寬度max-width

「max-width」是媒體特性中最經常使用的一個特性，其意思是指媒體類型小於或等於指定的寬度時，樣式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：當屏幕小於或等於480px時,頁面中的廣告區塊（.ads）都將被隱藏。

2.最小寬度min-width

「min-width」與「max-width」相反，指的是媒體類型大於或等於指定寬度時，樣式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是：當屏幕大於或等於900px時，容器「.wrapper」的寬度爲980px。

3.多個媒體特性使用

Media Queries能夠使用關鍵詞"and"將多個媒體特性結合在一塊兒。也就是說，一個Media Query中能夠包含0到多個表達式，表達式又能夠包含0到多個關鍵字，以及一種媒體類型。

當屏幕在600px~900px之間時，body的背景色渲染爲「#f5f5f5」，以下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4.設備屏幕的輸出寬度Device Width

在智能設備上，例如iPhone、iPad等，還能夠根據屏幕設備的尺寸來設置相應的樣式（或者調用相應的樣式文件）。一樣的，對於屏幕設備一樣可使用「min/max」對應參數，如「min-device-width」或者「max-device-width」。

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

上面的代碼指的是「iphone.css」樣式適用於最大設備寬度爲480px，好比說iPhone上的顯示，這裏的「max-device-width」所指的是設備的實際分辨率，也就是指可視面積分辨率。

5. not關鍵詞

使用關鍵詞「not」是用來排除某種制定的媒體類型，也就是用來排除符合表達式的設備。換句話說，not關鍵詞表示對後面的表達式執行取反操做，如：

@media not print and (max-width: 1200px){樣式代碼}

上面代碼表示的是：樣式代碼將被使用在除打印設備和設備寬度小於1200px下全部設備中。

6.only關鍵詞

only用來指定某種特定的媒體類型，能夠用來排除不支持媒體查詢的瀏覽器。其實only不少時候是用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表的。其主要有：支持媒體特性的設備，正常調用樣式，此時就當only不存在；表示不支持媒體特性但又支持媒體類型的設備，這樣就會不讀樣式，由於其先會讀取only而不是screen；另外不支持Media Queries的瀏覽器，不管是否支持only，樣式都不會被採用。如

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

在Media Query中若是沒有明確指定Media Type，那麼其默認爲all，如：

<linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

另外在樣式中，還可使用多條語句來將同一個樣式應用於不一樣的媒體類型和媒體特性中，指定方式以下所示。

<linkrel="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屬性同樣在不一樣的瀏覽器中添加前綴。