響應式設計
目前非常流行自適應設計與響應式設計，而且經常讓人混淆，自適應設計不應與自適應布局混為一談，它們是完全不一樣的概念。
在這先說明下這兩者的異同：
自從移動終端飛速發展以來，各種各樣的機型突飛猛進，很多網站的解決方法，是為不同的設備提供不同的網頁，比如專門提供一個mobile版本，或者iPhone/iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網站有多個portal（入口），會大大增加架構設計的復雜度。
于是，很早就有人設想，能不能"一次設計，普遍適用"，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整布局（layout）？
2010年，Ethan Marcotte提出了"自適應網頁設計"（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、并做出相應調整的網頁設計。
如圖所示就叫做自適應布局。自適應布局有它的使用價值，在于它能夠提供一種更加實用的解決方案，使得項目的實現成本更低，并且更加易于測試。一個自適應布局可以被看作是響應式布局的一個更加廉價的替代品，會在項目資源緊缺的情況下更具有吸引力。
而在響應式布局中你卻要考慮上百種不同的狀態:
響應式網頁設計是自適應網頁設計的子集。響應式網頁設計指的是頁面的布局（流動網格、靈活的圖像及媒介查詢）?？傮w目標就是去解決設備多樣化問題。
響應式布局等于流動網格布局，而自適應布局等于使用固定分割點來進行布局。
當固定寬度與流動寬度結合起來時，自適應布局就是一種響應式設計，而不僅僅是它的一種替代方法。
背景
PC互聯網加速向移動端遷移；
移動端入口：當用戶希望通過手機來完成PC頁的操作時，常見的是商家的運營微博，期文案足夠吸引用戶點擊鏈接參加活動，如果該活動頁沒做響應式處理：頁面體積大、請求多、體驗差、兼容性差，層層阻礙最終導致用戶放棄參加。
優勢
開發成本低，門檻低
Native APP：Objective-C or Java – 學習成本高
Hybrid APP： 外殼+Web APP，需安裝。
響應式Web APP：HTML5+JS+CSS – 門檻低，極易上手，迭代快
跨平臺和終端且不需要分配子域
雖然可通過監測用戶UA來判斷用戶終端后做跳轉，但它還是分配了多個域，而響應式無需監測用戶UA沒有域的切換，只需根據終端類型來適配不同的功能模塊與表現樣式，它是跨平臺和終端的，1頁面適配多終端。
技巧
那么如何進行響應式布局呢？下面就一步步為你揭開響應式布局的面紗：
Skill 1 學會運用 Css3 Media Queries，根據不同的屏幕分辨率，選擇應用不同的Css規則
Media Queries語法簡介：
max-width：若瀏覽區域的寬度小于400像素，則下方的CSS描述就會立即被套用：
新聞熱點
疑難解答
