如果您是一個的網頁設計師當看到我這個題目一定會在心理暗暗的諷刺下這人一定是不懂設計的,竟然還會問出這樣的問題!其實小編自然也知道兩者其實是一個概念來的,可是當很多人知道其一有的卻不知道自適應網頁設計,其實很多人會去看其相關的含義,發現他的含義幾乎是相同的,其實就是源於翻譯的問題,這個概念是由 Ethan Marcotte 曾經在 A List Apart 發表過一篇文章”Responsive Web Design”,文中援引了響應式建築設計的概念。而很多作品中也直譯為自適應網頁設計。

隨著 3G 的普及,越來越多的人使用手機上網。移動裝置正超過桌面裝置,成為訪問網際網路的常見終端。於是,網頁設計師不得不面對一個難題:如何才能在不同大小的裝置上呈現同樣的網頁?自適應不同解析度的網頁設計應運而生;下面是騰訊做的一項例項分析,先呢來看一張圖:

這是 2 個半月騰訊遊戲官網的解析度資料,可以看出來 PC 端裡 1024*768 佔 20% 、 1920*1080 佔 14% 。而這 2 個解析度的顯示寬度相差了接近一倍。
而現在設計師的設計稿普遍輸出尺寸都是 1920,所以設計師經常也會擔心:小解析度下能看到嗎?或者需要為手機端單獨做一版嗎?所以我們需要用一些技巧來讓大多數多使用者能看到的頁面效果是一樣的。這個概念就誕生了。