css3 Media Queries媒體查詢

css3的Media Queries媒體查詢用法詳解:
在當前，固定寬度的網站已經逐漸被響應式設計所取代，這是必然的趨勢。
所謂的響應式設計，就是無奈輪使用何種螢幕或設備，都能夠良好的展現頁面（在不同的設備，頁面展現風格可能會有不同）。
響應式設計解決了各種規格和形狀設備給程式設計師帶來的挑戰，可以讓網頁無論是在傳統的電腦、手機或平板電腦上都能正常展示。
透過媒體查詢技術，可以良好的實現響應式設計，以下就媒體查詢做一下介紹。
一.CSS2中的媒體查詢:
在css2中其實也有媒體查詢的應用，只不過比較簡單而已，看如下程式碼:

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

上面的程式碼分別規定三個css文件分別用於顯示器、所有類型設備和印表機。
二.媒體查詢使用方式:
媒體查詢的使用方式多種多樣，基本上適合css使用方式一一對應的，羅列如下:
link方式引入:

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />

xml方式引入:

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

@import方式引入:

@import url("css/reset.css") screen;

css程式碼中使用: 

@media screen{
  选择器{
    属性：属性值；
  }
}

style標籤上使用:  

<style type="text/css" media="screen">
/*code*/
</style>

三.媒體查詢規則:
css2中的媒體查詢非常的簡單，僅僅能夠區分媒體類型。
css3對媒體查詢進行了擴展，不但可以依據媒體的類型，且還可以依據媒體的相關屬性。
看如下程式碼實例:

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

當頁寬度小於或等於600px且套用至螢幕上時，就會呼叫softwhy.,css。查詢規則:
包含一個媒體類型，後面跟著一個或多個檢查特定條件（如最小的螢幕寬度）的表達式。
雖然使用方式不同，定義媒體查詢的方式也有所不同，例如media屬性方式和使用@media方式，但是規則都是一樣的。
（1）.簡單程式碼:

@media all and (min-width:800px) {
  /*code*/
}

所有最小水平螢幕寬度為800像素的螢幕都使用對應的css程式碼。
特別說明:如果媒體類型是all的時候，all可以省略，all後面的and也是可以省略的，簡寫程式碼如下:

 @media (min-width:800px) {
  /*code*/
}

（2）.複雜的查詢程式碼:

@media (min-width:800px) and (max-width:1200px) {
  /*code*/
}

（3）.and 關鍵字:
and用來規定必須同時滿足條件，程式碼如下: 

@media screen (min-width:800px) and (max-width:1200px) {
/*code*/
}

當螢幕滿足大於等於800px和小於等於1200px時就會使用對應的css程式碼。
（4）.or關鍵字:
or用來規定只要滿足一個條件即可，程式碼如下:  

@media screen (min-width:800px) or (orientation:portrait) {
/*code*/
}

當螢幕尺寸大約等於800px，或是方向是縱向的就會使用對應的css代碼。
（5）.not關鍵字:
not用來規定當不是指定條件時即可成立。

@media not print{
/*code*/
}

當不是印表機裝置時，使用對應的css程式碼。