1. 語(yǔ)法結(jié)構(gòu)及用法：
   @media 設(shè)備名 only （選取條件） not （選取條件） and（設(shè)備選取條件），設(shè)備二{sRules}
2. 實(shí)際應(yīng)用一 判斷設(shè)備橫豎屏：

/* 這是匹配豎屏的狀態(tài)，豎屏?xí)r的css代碼 */@media all and (orientation :portrait){}  ```
3. 實(shí)際應(yīng)用二 判斷設(shè)備類型：
```@media X and (min-width:200px){} X為設(shè)備類型》比如print/screen/TV等等```
4. 實(shí)際應(yīng)用三 判斷設(shè)備寬高：
```/* 寬度大于600px小于960之間時(shí)，隱藏footer結(jié)構(gòu) */@media all and (min-height:640px) and (max-height:960px){    footer{display:none;}} ```
5. 實(shí)際應(yīng)用四 判斷設(shè)備像素比：
```/* 像素比為1時(shí)，頭部顏色為綠色 */     
.header { background:red;display:block;}或@media only screen and (-moz-min-device-pixel-ratio: 1), only screen and (-o-min-device-pixel-ratio: 1), only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio:1) {.header{background:green;} }```
``` /* 像素比為1.5時(shí)，頭部背景為紅色 */        
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio:1.5) {.header{background:red;} }```
```/*像素比為2，頭部背景為藍(lán)色 */    
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio:2){.header{background:blue;} }  ```