響應式佈局設計

響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用「大勢所趨」來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。

1、什麼是響應式？

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用「大勢所趨」來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。

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

2、響應式的技術實現？

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

一、流體佈局

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

二、媒介查詢

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

三、彈性圖片

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

3、圖例展現

4、響應式的優缺點

優勢：

一、面對不一樣分辨率設備靈活性強可以快捷解決多設備顯示適應問題

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

三、跨平臺和終端且不須要分配子域雖然可經過監測用戶UA來判斷用戶終端後作跳轉，但它仍是分配了多個域，而響應式無需監測用戶UA沒有域的切換，只需根據終端類型來適配不一樣的功能模塊與表現樣式，它是跨平臺和終端的，1頁面適配多終端。
PC – http://qzone.com
Mobile – http://m.qzone.com
響應式：PC & Mobile – http://qzone.com 無需跳轉

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

缺點：

一、加載須要必定的時間 雖然，它不是一個大問題，在響應式設計中，須要下載一些看起來並沒必要要的HTML/CSS。除此以外，圖片並無根據設備調整到合適大小，而這正是致使加載時間加倍的緣由。
二、優化搜索引擎 對於響應式Web設計，爲搜索引擎肯定關鍵字不是一件容易的事。由於相比通常桌面用戶，移動用戶多采用不一樣的關鍵字，修改標題及其餘事項都比較困難。
三、時間花費 開發響應式網站是一項耗時的工做。若是你計劃把一個現有網站轉化成響應式網站，可能耗時更多。若是你想要一個響應式網站，最好從草圖開始從新設計。**

 

做者信息：
做者系力譜宿雲 LeapCloud 團隊ux組成員：王濤【原創】
首發地址：https://blog.maxleap.cn/archi...