Media Queries媒體查詢常用關鍵詞

使用媒體查詢可以讓我們在不同的條件下使用不同的樣式，以便達到最佳的效果。

關於媒體查詢更多內容參閱CSS3 媒體查詢一章節。

下面就簡單介紹一下媒體查詢的基本語法結構和常用的幾個關鍵詞。

語法結構:

[CSS] 純文字檢視 複製程式碼
@media 媒體型別and （媒體特性）{
  /*code*/
}

下面介紹一下比較常用的幾個關鍵詞:

一.最大寬度max-width:

其作用是指媒體型別小於或等於指定的寬度時，樣式生效。

[CSS] 純文字檢視 複製程式碼
@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面程式碼的意思是，當螢幕小於或者等於480px的時候，class樣式類為ads的元素會隱藏。

二.最小寬度min-width:

其作用是指媒體型別大於或等於指定的寬度時，樣式生效。

[CSS] 純文字檢視 複製程式碼
@media screen and (min-width:900px){
  .wrapper{width: 980px;}
}

上面的程式碼的意思是，當螢幕大於或者等於900px的時候，class樣式類為wrapper的元素的寬度980px。

三.多個媒體特性使用:

可以將多個媒體特性共同作為限制條件。

[CSS] 純文字檢視 複製程式碼
@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:green;}
}

當螢幕在大於等於600px小於等於900px，body的背景顏色設定為green。

四.裝置螢幕的輸出寬度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關鍵詞:

[CSS] 純文字檢視 複製程式碼
@media not print and (max-width: 1200px){樣式程式碼}

上面程式碼表示的是：樣式程式碼將被使用在除列印裝置和裝置寬度小於1200px下所有裝置中。

六.only關鍵詞:

[HTML] 純文字檢視 複製程式碼
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

上面的程式碼表示，只有是顯示螢幕且裝置寬度為240px的裝置才會引用android240.css檔案。