概念
什么是響應式？響應式是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
趨勢
在我國互聯網的發展過程中，PC互聯網已日趨飽和，移動互聯網卻呈現井噴式發展。伴隨著移動終端價格的下降及wifi的廣泛鋪設，移動網民呈現爆發趨勢。截至2014年1月，我國移動互聯網用戶總數達8.38億戶，在移動電話用戶中的滲透率達67.8%；手機網民規模達5億，占總網民數的八成多，手機保持第一大上網終端地位。我國移動互聯網發展進入全民時代。
移動終端品類多，型號豐富，傳統PC網頁無法適應移動終端的多變性。當移動終端客戶在訪問傳統web頁面時，操作上會帶來很多不方便。網頁視覺效果也會大打折扣，嚴重地影響了web的用戶體驗性。
響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用大勢所趨來形容也不為過。
優勢
1、較原生移動APP開發，它具有開發成本低，技術門檻低的特點。
2、無需安裝，且更新迭代快捷方便。
3、跨平臺，滿足多終端
4、無需分配獨立子域
5、用戶體驗友好，對搜索引擎友好（谷歌推薦支持響應式布局）
思想
為移動而生，響應式web設計應以移動優先為原則。PC端作為其擴展設計，并且向下兼容。
實施
所謂響應式布局，就是要針對不同終端，不同屏幕做出靈活性的調整，以適應不同終端的瀏覽;這要求它具有靈活性，流動性，彈性化的特點。
1、viewport
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
手機瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中，通常這個虛擬的“窗口”（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），用戶可以通過平移和縮放來看網頁的不同部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支持。將initial-scale的值設定為1，即可覆寫默認的縮放方式，保持原始的尺寸及比例。更多關于viewport meta標記的用法，可以參考蘋果官方的文檔。
width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放
2、CSS3 Media Queries(媒體查詢)
Media Queries，其作用就是允許添加表達式用以確定媒體的環境情況，以此來應用不同的樣式表。換句話說，其允許我們在不改變內容的情況下，改變頁面的布局以精確適應不同的設備。
如何使用media queries?
方法一、直接在link中判斷設備的尺寸，然后引用不同的css文件。
<link rel='stylesheet' type='text/css' href='styleA.css' media='screen and (min-width: 400px)'>
意思是當屏幕的寬度大于等于400px的時候，應用styleA.css。
方法二、寫在style標簽中或css文件里
@media screen and (max-width: 600px) {
/*當屏幕尺寸小于600px時，應用下面的CSS樣式*/
.class {
background: #ccc;
}
}
用于布局的CSS Media Queries有以下幾種
設備類型(media type):
all所有設備
screen 電腦顯示器
print打印用紙或打印預覽視圖
handheld便攜設備
tv電視機類型的設備
speech語意和音頻盒成器
braille盲人用點字法觸覺回饋設備
embossed盲文打印機
projection各種投影設備
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端
設備特性(media feature):
width瀏覽器寬度
height瀏覽器高度
device-width設備屏幕分辨率的寬度值
device-height設備屏幕分辨率的高度值
orientation瀏覽器窗口的方向縱向還是橫向，當窗口的高度值大于等于寬度時該特性值為portrait，否則為landscape
aspect-ratio比例值，瀏覽器的縱橫比
device-aspect-ratio比例值，屏幕的縱橫比
關于media queries更多應用可以看這篇文章：
3、JavaScript
IE永遠一直是一個頭疼問題，針對IE8及以下不支持CSS3的媒體查詢，可以通過JS腳本來彌補。
<!--[if lt IE 9]>
<scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
<![endif]-->
應用（WebPlus3）
目前的web訪問者多為更年輕一代的95后，對于移動互聯網的應用發展，他們起到了推動作用。手機，pad等多種移動終端已經成為他們的標配。傳統PC端web網站，已經無法滿足這樣的訪問需求。如果單獨開發移動平臺的專用APP，成本太高，周期太長，維護不方便等因素，對現有網站進行重構實現向響應式web過渡，是最快最經濟的方案?，F在，網站群平臺webplus3已經滿足向響應式web過渡的要求，可以快速創建制作響應式webplus3通用模板，已經有成功的應用案例。
