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

<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ī)定三個(gè)css文件分別用于顯示器、所有類(lèi)型設(shè)備和打印機(jī)。
二.媒體查詢(xún)使用方式:
媒體查詢(xún)的使用方式多種多樣，基本適合css使用方式一一對(duì)應(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>

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

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

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

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

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

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

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

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

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

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

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

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

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

@media not print{
/*code*/
}

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