如果你是一個(gè)資深的網(wǎng)頁(yè)設(shè)計(jì)師當(dāng)看到我這個(gè)題目一定會(huì)在心理暗暗的諷刺下這人一定是不懂設(shè)計(jì)的，竟然還會(huì)問(wèn)出這樣的問(wèn)題！其實(shí)小編自然也知道兩者其實(shí)是一個(gè)概念來(lái)的，可是當(dāng)很多人知道其一有的卻不知道自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)，其實(shí)很多人會(huì)去看其相關(guān)的含義，發(fā)現(xiàn)他的含義幾乎是相同的，其實(shí)就是源于翻譯的問(wèn)題，這個(gè)概念是由Ethan Marcotte曾經(jīng)在A List Apart發(fā)表過(guò)一篇文章"Responsive Web Design"，文中援引了響應(yīng)式建筑設(shè)計(jì)的概念。而很多作品中也直譯為自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)。

 

隨著3G的普及，越來(lái)越多的人使用手機(jī)上網(wǎng)。移動(dòng)設(shè)備正超過(guò)桌面設(shè)備，成為訪問(wèn)互聯(lián)網(wǎng)的最常見(jiàn)終端。于是，網(wǎng)頁(yè)設(shè)計(jì)師不得不面對(duì)一個(gè)難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)？自適應(yīng)不同分辨率的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)運(yùn)而生；下面是騰訊做的一項(xiàng)實(shí)例分析，首先呢來(lái)看一張圖：

 

這是2個(gè)半月騰訊游戲官網(wǎng)的分辨率數(shù)據(jù)，可以看出來(lái)PC端里1024*768占20%、1920*1080占14%。而這2個(gè)分辨率的顯示寬度相差了接近一倍。

 

而現(xiàn)在設(shè)計(jì)師的設(shè)計(jì)稿普遍輸出尺寸都是1920，所以設(shè)計(jì)師經(jīng)常也會(huì)擔(dān)心：小分辨率下能看到嗎？或者需要為手機(jī)端單獨(dú)做一版嗎？所以我們需要用一些技巧來(lái)讓大多數(shù)用戶(hù)能看到的頁(yè)面效果是一樣的。這個(gè)概念就誕生了。