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程式碼。
下一節