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

<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" />

上面的代碼分別規(guī)定三個css文件分別用于顯示器、所有類型設(shè)備和打印機(jī)。
二.媒體查詢使用方式:
媒體查詢的使用方式多種多樣，基本適合css使用方式一一對應(yīng)的，羅列如下:
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標(biāo)簽上使用:  

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

三.媒體查詢規(guī)則:
css2中的媒體查詢非常的簡單，僅僅能夠區(qū)分媒體類型。
css3對媒體查詢進(jìn)行了擴(kuò)展，不但可以依據(jù)媒體的類型，且還可以依據(jù)媒體的相關(guān)屬性。
看如下代碼實例:

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

當(dāng)頁寬度小于或等于600px且應(yīng)用于屏幕上時，就會調(diào)用softwhy.,css。查詢規(guī)則:
包含一個媒體類型，后跟一個或多個檢查特定條件（如最小的屏幕寬度）的表達(dá)式。
雖然使用方式不同，定義媒體查詢的方式也有所不同，比如media屬性方式和使用@media方式，但是規(guī)則都是一樣的。
（1）.簡單代碼:

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

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

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

（2）.復(fù)雜的查詢代碼:

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

（3）.and 關(guān)鍵詞:
and用來規(guī)定必須同時滿足條件，代碼如下: 

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

當(dāng)屏幕滿足大于等于800px和小于等于1200px時就會使用對應(yīng)的css代碼。
（4）.or關(guān)鍵詞:
or用來規(guī)定只要滿足一個條件即可，代碼如下:  

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

當(dāng)屏幕尺寸大約等于800px，或者方向是縱向的時就會使用對應(yīng)的css代碼。
（5）.not關(guān)鍵字:
not用來規(guī)定當(dāng)不是指定條件時即可成立。

@media not print{
/*code*/
}

當(dāng)不是打印機(jī)設(shè)備時，使用對應(yīng)的css代碼。