css3媒體查詢

最多見的辦法就是基類（最經常使用的網站佈局）+擴展類（幾種不一樣的網站佈局類）來實現不一樣的佈局。 

<!–使用說明：
網站基本佈局，使用class="layout";
使用ipad訪問時，追加class="layout-ipad";
使用iphone訪問時，追加class="layout-iphone";
使用iphone橫屏訪問時，追加class="layout-iphone-h";
使用移動設備分辨率小於320px*480px訪問時，追加class="layout-miscreen";
–>
<div class="layout layout-ipad">
   <header>header</header>
   <section>main</section>
   <footer>footer</footer>
</div> 

針對不一樣佈局編寫不一樣的css代碼，經過js判斷設備、不一樣分辨率調用不一樣的佈局樣式，從而實現同一套前端Html代碼適配不一樣設備和場景，給用戶帶來最佳的操做體驗。 

自從響應式佈局的概念誕生以來，它便火了起來。 

官方是這麼定義響應式佈局設計的： 


響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。
這個概念是爲解決移動互聯網瀏覽而誕生的。
響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用大勢所趨來形容也不爲過。 

用一句話來講：
使用同一套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模擬移動設備的真實具體參數值。