css3媒介查詢使用規則小結

響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用大勢所趨來形容也不爲過。 

用一句話來講：
使用同一套Html代碼來適配不一樣設備和知足不一樣場景不一樣用戶使用。 

關鍵專業術語：
Media Query（css3媒介查詢） 

語法結構及用法：
@media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules} 

實際應用一 判斷設備橫豎屏：
/* 這是匹配橫屏的狀態，橫屏時的css代碼 */
@media all and (orientation :landscape){} 
/* 這是匹配豎屏的狀態，豎屏時的css代碼 */
@media all and (orientation :portrait){}
  
實際應用二 判斷設備類型：
@media X and (min-width:200px){} 
X爲設備類型》好比print/screen/TV等等


實際應用三 判斷設備寬高：
/* 寬度大於600px小於960之間時，隱藏footer結構 */
@media all and (min-height:640px) and (max-height:960px){
    footer{display:none;}
} 

實際應用四 判斷設備像素比：
/* 像素比爲1時，頭部顏色爲綠色 */
.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時，頭部背景爲紅色 */
@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，頭部背景爲藍色 */
@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;} }  

關於設備像素比， 您能夠參考：
HOW TO UNPREFIX -WEBKIT-DEVICE-PIXEL-RATIO​
Device pixel density tests What's My Device Pixel Ratio?
PPI、設備像素比devicePixelRatio簡單介紹、 在各類高分辨率設備中使用像素 

開發中，可以使用Chrome emulation模擬移動設備的真實具體參數值。
關於Chrome Emulation可參考以前 《Chrome Emulation-移動設備特性隨意配》一文。