響應式布局等於流動網格布局，響應式布局就是實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使**在手機和平板電腦上有更好的瀏覽閱讀體驗。換句話說就是乙個**能夠相容多個終端，而不是為了每乙個終端做乙個特定的版本。
在我看來，響應式布局更像是自適應布局的優化（自適應布局+流體布局），通過rem和**查詢設定多個流體布局，可以實現更加合適的視覺效果，相比彈性布局有時候勉強的縮放顯示也會更合適，響應式布局相比彈性布局卻比較費勁。
動態根據當前螢幕的寬度，自動改變頁面中盒子的寬度、盒子的顯示或隱藏。
1.布局特點：每個螢幕解析度下面會有乙個布局樣式，即元素位置和大小都會變。
2、設計方法：**查詢+流式布局。通常使用 @media **查詢 和網格系統 (grid system) 配合相對布局單位進行布局，實際上就是綜合響應式、流動等上述技術通過 css 給單一網頁不同裝置返回不同樣式的技術統稱。
3.優點：①適應pc和移動端，如果足夠耐心，效果完美
②一套網頁可以適配多個終端
③對於不同裝置只需要開發一套網頁即可，公司開發成本較低
**4.缺點：**① 乙個頁面需要相容多個終端，考慮的情況多種，開發效率較慢
②**會更多，網頁的載入速度較慢
③**查詢是有限的，也就是可以列舉出來的，只能適應主流的寬高。
④要匹配足夠多的螢幕大小，工作量不小，設計也需要多個版本。
①設定 meta 標籤
media queries 是響應式設計的核心。
它根據條件告訴瀏覽器如何為指定檢視寬度渲染頁面。假如乙個終端的解析度小於 980px，那麼可以這樣寫：
③設定多種試圖寬度
假如我們要設定相容 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) {}
頁面布局最好採用液態布局（流式布局）
盡量少使用絕對的寬度，多用百分比
字型不要使用px寫死，最好使用相對大小的em，或者rem
響應式與自適應的原理是相似的，都是檢測裝置，根據不同的裝置採用不同的css，而且css都是採用的百分比的，而不是固定的寬度，特殊的點是響應式的模板在不同的裝置上看上去是不一樣的，會隨著裝置的改變而改變展示樣式所有的裝置看起來都是一套的模板，不過是長度或者變小了，不會根據裝置採用不同的展示樣式，流式就是採用了一些設定，當寬度大於多少時怎麼展示，小於多少時怎麼展示，而且展示的方式向水流一樣，一部分一部分的載入，靜態的就是採用固定寬度的了。
流式布局是用於解決類似的裝置不同解析度之間的相容(一般解析度差異較少)；響應式是用於解決不用裝置之間不用解析度之間的相容問題(一般是指pc，平板，手機等裝置之間較大的解析度差異)。
響應式布局詳解
響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用 大勢所趨 來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候，首先要...
響應式布局 media詳解
語法 media 型別及功能 指定 查詢使用的 特性。這類似於css屬性，如 max width 960px。css3 說明 指定樣式表規則用於指定的 型別和查詢條件。ie8及以下只能實現css2中的部分，即只可以設定 型別。查詢可以被用在css中的 media和 import規則上，也可以被用在h...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...