css3媒體查詢實現網站響應式佈局

響應式建築設計、響應式傢俱設計、響應式辦公設計，這些詞多是已有的專業名詞，也多是我本身想出來的一些名詞。
由於在生活中，咱們經常會見到不少讓人驚歎的設計，爲何同一套東西通過不一樣的方式變化以後會給人不一樣的使用感覺和體驗呢？
這樣既節約制形成本，又節省空間，還能體驗創意性的生活。

先來給你們欣賞幾張圖
大黃蜂：

沙發牀：

沙發椅：

沒錯！大黃蜂爲應對緊急戰鬥而瞬間由汽車變爲戰鬥機，沙發牀、沙發座椅是咱們見過再日常不過的傢俱了。
咱們老是驚歎外國人爲何有這麼豐富的想象力和神奇的創造力。而是什麼驅動他們去想象進而去創造呢？

節省物料成本、節省人力財力成本、節省五六萬一平的家居空間、享受富有創意的生活、住的更加溫馨、用最強有力的一面應對隨時會變的場景。
多是由於人類原本就是一個比較懶和挑的動物，因此纔會去想法設法的創造讓人驚奇而又實用的東西出來。

大黃蜂機器人、沙發椅或者是沙發牀等等更多讓咱們驚奇的東西，它們都或多或少的將響應式設計的思想融入到了產品當中。

一樣響應式佈局也被應用到網站前端開發中，在國內這一詞想必是很是火吧，那網站爲何要使用響應式佈局呢？

緣由和其餘創意性的生活用品基本上是同樣的，處於對人力物力財力的節省和對生活富有詩意的一種追求。
在人力物力和財力有限的狀況下，一個網站既要功能完善，又要跟得上移動互聯網的潮流（不是瞎跟風啊），那麼同一套後臺系統、數據庫和前端代碼，怎樣才能知足用戶在不通場景（廁所、超市、商場、被窩）不一樣設備（Iphone、ipad、電視、小米、三星、華爲、HTP、諾基亞等等）上都能體驗到最佳的產品體驗和功能呢？
以往（在響應式概念誕生之前）的網站或者應用是怎麼處理的呢？
最多見的辦法就是基類（最經常使用的網站佈局）+擴展類（幾種不一樣的網站佈局類）來實現不一樣的佈局。

<!–使用說明：
網站基本佈局，使用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值爲圖中之一：

實際應用三 判斷設備寬高：
/* 寬度大於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-移動設備特性隨意配》一文。

瞭解了這些，那麼在國內到底有多少網站有應用到響應式佈局呢？有一淘、淘寶、優酷等等。
國外響應式網站很是多了，我的親身感覺和熟悉的最典型網站就是WordPress系統了。

仍是開頭說的那樣，響應式佈局不是趕潮流，而是有這樣的一批用戶須要——處於爲用戶在不一樣的場景（拉粑粑的時候）不一樣的設備（某國產山寨主流機））瀏覽網頁時考慮的目的，使得他們能像操做PC端網頁同樣的天然去操做移動設備中的網頁，甚至是TV上的應用或者網站。這樣響應式纔會作的更合理更人性化。

原文地址：http://www.css3china.com/?p=495