互聯網技術的快速發展，手機移動端用戶在不斷增加，僅僅依靠PC網站體驗已經無法滿足人們日常生活或工作的需要，人們對網站有著更高的要求。響應式網站應運而生，它能夠很好的滿足用戶的需求，帶給終端用戶良好的訪問體驗。響應式網站已經成為當下較為主流的網站設計，越來越多的企業傾向于建設響應式網站。

響應式網站設計理念：

頁面的設計與開發應根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實現方式由多方面組成，包括彈性網格和布局、圖片等。無論用戶正在使用筆記本還是Pad，網站的頁面都應能自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備。

也是說頁面應該有能力去自動響應用戶的設備環境。響應式設計理念是一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本。

響應式的特點

1.快捷傳播，統一管理，維護方便，跨系統，跨平臺，跨終端等標桿級網站。

2.只需對站點后臺和域名作的維護和推廣，降低網站運營成本，提高傳播效率。

3.用戶可以使用瀏覽器、二維碼掃描工具等獲取網站信息。

4.響應式架構會根據各終端設備的分辨率自動調整頁面布局和體驗交互程序，讓用戶能夠快速、舒適、直觀地從瀏覽器或微信平臺等獲取信息。

響應式網站的設計流程

1.確定需要兼容的設備類型、屏幕尺寸

通過對用戶的分析研究，了解用戶使用設備的分布情況，確定需要兼容的設備類型、屏幕尺寸。

設備類型：包括移動設備(手機、平板)和PC。對于移動設備，設計和實現的同時，要注意增加手勢功能。屏幕尺寸：包括各種手機屏幕的尺寸(含橫向和豎向)、各種平板的尺寸(含橫向和豎向)、普通電腦屏幕和寬屏。需要考慮的是某個頁面進行響應式設計時，其適用的尺寸范圍是哪些?結合用戶需求和實現成本，對適用的尺寸進行取舍。如一些功能操作的頁面，如果用戶沒有在移動端進行操作的需求，沒有必要進行響應式設計。

2.制作線框原型

針對確定下來的不同尺寸制作不同的線框原型，要了解不同尺寸下，頁面的布局如何變化，內容尺寸如何縮放，功能、內容的刪減等，也可根據不同的情況，針對特殊的環境做特殊化的設計。這個過程需要設計師和前端開發人員保持密切、良好的溝通。

3.測試線框原型

將圖片導入到相應的設備進行簡單的測試，能夠幫助研發者盡早發現網站在可訪問性、可讀性等方面存在的各種問題。

4.視覺設計

視覺設計是很關鍵的一點，需要注意的是移動設備的屏幕像素密度與傳統電腦屏幕不一樣，在設計時，需要保證內容文字的可讀性、控件可點擊區域的面積等。

響應式頁面的優點

1.跨平臺。在手機，pad，PC端均有不俗的表現。

2.節省人力開發成本。不再需要有人分別的去維護PC頁面，移動頁面。

3.表現力一致。在不同的平臺上看到的東西都是基本一致的，會讓用戶感覺體驗良好。

響應式頁面的缺點

1.自由度較低，局限性較大。你需要考慮在手機，pad，PC端上三種屏幕下的頁面內元素的呈現，這會存在一定的局限性，如在PC上是橫向滑動的通欄圖，在手機和pad是不用的。只能用一張單一的圖或者一組靜態圖來表達。

2.頁面會比較大，在2G，3G網絡下打開速度會比較慢。響應式頁面是同時下載多套CSS樣式代碼，可能造成在手機上要下載PC/pad冗余代碼，這沒有什么意義，也浪費流量資源。

3.對于老版本IE(IE8及以下版本瀏覽器)兼容性不夠友好，這是一個較為嚴重的問題，如果你的網站用戶大多還采用老版本IE(IE8及以下版本瀏覽器)的話，建議不做響應式設計。