什麼是響應式佈局

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。

　優點： 面對不同分辨率設備靈活性強

能夠快捷解決多設備顯示適應問題

　　缺點：兼容各種設備工作量大，效率低下

代碼累贅，會出現隱藏無用的元素，加載時間加長

其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果

一定程度上改變了網站原有的佈局結構，會出現用户混淆的情況

響應式設計的'步驟：

　　1. 設置 Meta 標籤

大多數移動瀏覽器將html頁面放大為寬的視圖(viewport)以符合屏幕分辨率。你可以使用視圖的meta標籤來進行重置。下面的視圖標籤告訴瀏覽器，使用設備的寬度作為視圖寬度並禁止初始的縮放。在標籤里加入這個meta標籤。

　　<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

[1](user-scalable = no 屬性能夠解決 iPad 切換橫屏之後觸摸才能回到具體尺寸的問題。 )

　　2. 通過媒介查詢來設置樣式 Media Queries

viaMedia Queries 是響應式設計的核心。

它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。假如一個終端的分辨率小於 980px，那麼可以這樣寫：

@media screen and (max-width: 980px) {

#head { … }

#content { … }

#footer { … }

}

這裏的樣式就會覆蓋上面已經定義好的樣式。

　　3. 設置多種試圖寬度

假如我們要設定兼容 iPad 和 iphone 的視圖，那麼可以這樣設置：

/** iPad **/

@media only screen and (min-width: 768px) and (max-width: 1024px) {}

/** iPhone **/

@media only screen and (min-width: 320px) and (max-width: 767px) {}