自適應網頁設計從字面的上的理解就是自己能夠適應，不斷的改變。這個概念是 2010 年 Ethan Marcotte 提出了” 自適應網頁設計”（Responsive Web Design）這個名詞，指可以自動識別螢幕寬度、並做出相應調整的網頁設計。

自適應網頁設計的出現主要是想解決目前移動裝置與 PC 端網站之間的顯示問題，記得在手機網站還沒有的時候我們只會關心 PC 端的設計，就拿我們 WordPress 網站建設行業而言更多的還是專注到顯示器尺寸的大小然後設計網站的頁面大小，但可能也打不到所有的滿足，更多的是看什麼顯示器佔主導因素而決定的。

隨著 3G 的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的裝置上呈現同樣的網頁？手機的螢幕比較小，寬度通常在 600 畫素以下；PC 的螢幕寬度，一般都在 1000 畫素以上（目前主流寬度是 1366×768），有的還達到了 2000 畫素。同樣的內容，要在大小迥異的螢幕上，都呈現出滿意的效果，並不是一件容易的事。

所以自適應網頁設計的出現讓我們解決了這個問題，不會再去做一下專項的設計，比如手機版、 ipad 版等等。不但版本多難以管理，如果一個網站只有一個版本從人力物力方面都是一種節約。

如果螢幕寬度在 600 畫素到 1300 畫素之間，則 6 張圖片分成兩行。

如果螢幕寬度在 400 畫素到 600 畫素之間，則導航欄移到網頁頭部。

如果螢幕寬度在 400 畫素以下，則 6 張圖片分成三行。