//語法：@media mediatype and | not | only (media feature) { css-code; }//也可以針對(duì)不同的媒體使用不同的stylesheets: <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">一、首先是<meta>標(biāo)簽
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這段代碼的幾個(gè)參數(shù)解釋：
二、<head>標(biāo)簽中引入（CSS2 media）
其實(shí)并不是只有CSS3才支持Media的用法，早在CSS2開始就已經(jīng)支持Media，具體用法，就是在HTML頁面的head標(biāo)簽中插入如下代碼：
例如我們想知道現(xiàn)在的移動(dòng)設(shè)備是不是縱向放置的顯示屏，可以這樣寫：
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" ;href="style.css">
頁面寬度小于960的執(zhí)行指定的樣式文件：
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">
既然CSS2可以實(shí)現(xiàn)CSS的這個(gè)效果為什么不用這個(gè)方法呢，很多人應(yīng)該會(huì)問，但是上面這個(gè)方法，最大的弊端是他會(huì)增加頁面http的請(qǐng)求次數(shù)，增加了頁面負(fù)擔(dān)，我們用CSS3把樣式都寫在一個(gè)文件里面才是最佳的方法。
下面來解釋一下遇到?jīng)_突時(shí)的機(jī)制：
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 800px)"> <link rel="stylesheet" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)"> <link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">
上面將設(shè)備分成3種，分別是寬度大于800px時(shí)，應(yīng)用 styleA ，寬度在600px到800px之間時(shí)應(yīng)用 styleB ，以及寬度小于600px時(shí)應(yīng)用 styleC 。那假如寬度正好等于800px時(shí)該應(yīng)用那個(gè)樣式？是 styleB，因?yàn)榍皟蓷l表達(dá)式都成立，按CSS默認(rèn)優(yōu)先級(jí)規(guī)則后者覆蓋了前者。
因此，為了避免沖突，這個(gè)例子正常情況應(yīng)該這樣寫：
<link rel="stylesheet" href="styleA.css" media="screen"> <link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)"> <link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">
三、回歸CSS3 @media
上面我們大概講了下CSS2的媒體查詢用法，現(xiàn)在我們重新回到CSS3的媒體查詢，在第一段代碼上面我用的是小于960px的尺寸的寫法，那現(xiàn)在我們來實(shí)現(xiàn)等于960px尺寸的代碼，以下代碼需要寫在style標(biāo)簽或者css文件中：
@media screen and (max-device-width:960px){ body{background:red;}}然后就是當(dāng)瀏覽器尺寸大于960px時(shí)候的代碼了：
@media screen and (min-width:960px){ body{background:orange;}}我們還可以混合使用上面的用法：
@media screen and (min-width:960px) and (max-width:1200px){ body{background:yellow;}}上面的這段代碼的意思是當(dāng)頁面寬度大于960px小于1200px的時(shí)候執(zhí)行下面的CSS。
四、Media所有參數(shù)匯總
以上就是我們最常需要用到的媒體查詢器的三個(gè)特性，大于，等于，小于的寫法。媒體查詢器的全部功能肯定不止這三個(gè)功能，下面是我總結(jié)的它的一些參數(shù)用法解釋：