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

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

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

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

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

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

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

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

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

優(yōu)勢(shì)：

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

不足：

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

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

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

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

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

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

6、移動(dòng)終端屏顯元素

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

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

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