什么是響應式網頁設計，其設計規范及三大要點介紹

響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

一、什么是響應式？

響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

響應式網頁設計考慮到多平臺、多種屏幕尺寸的情況，可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。當你不知道用戶使用什么設備，不知道用戶的屏幕尺寸時，又想達到較優布局，那么可以采用響應式設計。響應式網頁設計就是一個網站能夠兼容多個終端。

二、響應式的技術實現？

響應式網頁設計由流體布局、媒介查詢、彈性圖片三種技術實現。

1、流體布局

原特指以百分比為度量單位的布局技術實現方式。在響應式設計的布局中，不再以像素（px）作為唯一單位，而是采用百分比或者混合百分比、像素為單位，設計出更具靈活性的布局方式。

2、媒介查詢

媒體查詢可以讓你根據在特定環境下查詢到的各種屬性值——比如設備類型、分辨率、屏幕物理尺寸及色彩等——來決定應用什么樣的樣式。通過使用媒介查詢，可以獲取到設備及設備的特性，及時的響應布局方案，從而解決之前在單純的布局設計中遺留的問題。

3、彈性圖片

伴隨布局的彈性，圖片作為信息重要的形式之一也必須有更靈活的方式去適應布局的變化。擴大研究范圍：除了圖片，還應該包括圖標、圖表、視頻等信息內容的響應方式。

三、圖例展示

四、響應式的優缺點

優點：

1、面對不同分辨率設備靈活性強能夠快捷解決多設備顯示適應問題

2、開發成本低，門檻低Native APP：Objective-C or Java – 學習成本高Hybrid APP： 外殼+Web APP，需安裝。響應式Web APP：HTML5+JS+CSS – 門檻低，極易上手，迭代快

3、跨平臺和終端且不需要分配子域雖然可通過監測用戶UA來判斷用戶終端后做跳轉，但它還是分配了多個域，而響應式無需監測用戶UA沒有域的切換，只需根據終端類型來適配不同的功能模塊與表現樣式，它是跨平臺和終端的，1頁面適配多終端。

PC – http://qzone.com

Mobile – http://m.qzone.com

響應式：PC & Mobile – http://qzone.com 無需跳轉

4、本地存儲Web App可以利用本地存儲的特性將重要和重復的數據保存在本地，避免頁面的重復刷新，減少重要信息在傳輸過程中被泄露，增量傳輸修改內容。

缺點：

1、加載需要一定的時間 雖然，它不是一個大問題，在響應式設計中，需要下載一些看起來并不必要的HTML/CSS。除此之外，圖片并沒有根據設備調整到合適大小，而這正是導致加載時間加倍的原因。

2、優化搜索引擎 對于響應式Web設計，為搜索引擎確定關鍵字不是一件容易的事。因為相比一般桌面用戶，移動用戶多采用不同的關鍵字，修改標題及其他事項都比較困難。

3、時間花費 開發響應式網站是一項耗時的工作。如果你計劃把一個現有網站轉化成響應式網站，可能耗時更多。如果你想要一個響應式網站，最好從草圖開始重新設計。