1、為什么需要響應式web設計

由于目前移動設備的大量使用，以及PC顯示器的尺寸逐漸出現(xiàn)較大差別，傳統(tǒng)的web頁面已經不能滿足多種設備的瀏覽效果，比如傳統(tǒng)頁面在大瀏覽器中會有較大的空白區(qū)域，而在小瀏覽器已經移動設備中，不能完全顯示頁面，或是將頁面縮小至適應移動設備尺寸大小，不能正常瀏覽，對于點擊觸點也有影響，很多人會選擇放大頁面，在進行瀏覽，這樣整個頁面就需要不停的拖動，給用戶不好的體驗。

各種屏幕尺寸各種操作系統(tǒng)各種訪問設備各種需求：

2、什么是響應式web設計

一個網站兼容多個終端。

同樣的代碼，通過設備適配，滿足不同的訪問設備，能展現(xiàn)出不同的效果，這就是web響應式。

3、響應式設計的替代方案

開發(fā)針對網站的、完全獨立的移動版本，開發(fā)移動應用APP。但這樣做也存在一定的不足。例如：開發(fā)獨立版本的網頁，可以通過設備適配進行跳轉，需要維護多個頁面，對于首頁級別頁面適用，不適用于內容頁開發(fā)移動應用，開發(fā)成本高，不利于搜索引擎收錄。

4、響應式web設計的優(yōu)勢&不足

優(yōu)勢：

多終端視覺和操作體驗風格統(tǒng)一開發(fā)、維護、運營成本低不同設備間的兼容性強操作靈活；響應式設計是針對頁面的，可以只對必要的頁面部分進行改動對用戶友好；用戶可以與網站一直保持聯(lián)系，比如URL不變積累分享；通過單一的URL地址收集所有的社交分享鏈接最佳化搜索引擎；可以完成移動網站和桌面網站的連接無重定向：包含無用戶代理定向。

不足：

兼容性：低版本瀏覽器可能存在不兼容問題移動帶寬流量：相比移動版定制網站，流量稍大加載需要一定的時間；在響應式設計中，需要下載一些看起來并不必要的HTML、CSS。除此之外，圖片并沒有根據設備調整到合適大小，而這正式導致加載時間加倍的原因優(yōu)化搜索引擎；對于響應式web設計，為搜索引擎確定關鍵字不是一件容易的事。

5、響應式與自適應的區(qū)別

響應式布局：流體網絡

網頁的布局改變重新排布更好的用戶體驗測試難度大。

自適應布局：固定斷點

網頁的完全縮放實施代價低測試容易設計更加可控。

6、移動終端屏顯元素

移動設備瀏覽器內核：Trident（IE）、Gecko（FF）、Presto（opera，已廢棄）、Webkit（Safari、chrome）、Blink（google）。

移動設備的尺寸：iPhone（980），iPad（1024），Android（分辨率480*800情況下，980），WinPhone（1024）等。

下圖為移動設備的分辨率：