1、為什么需要響應(yīng)式web設(shè)計

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

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

2、什么是響應(yīng)式web設(shè)計

一個網(wǎng)站兼容多個終端。

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

3、響應(yīng)式設(shè)計的替代方案

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

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

優(yōu)勢：

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

不足：

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

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

響應(yīng)式布局：流體網(wǎng)絡(luò)

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

自適應(yīng)布局：固定斷點

網(wǎng)頁的完全縮放實施代價低測試容易設(shè)計更加可控。

6、移動終端屏顯元素

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

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

下圖為移動設(shè)備的分辨率：