此概念於 2010 年 5 月由國外著名網頁設計師 Ethan Marcotte 所提出。此概念出自於響應式建築設計的概念,也就是房間或空間會自動調整其容納的人數和人進出的流量。
Ethan Marcotte 於他的文章中提到,響應式建築結構就是建築師將透過嵌入式機器人和可延展的建材結合,以藝術裝置和牆體結構作為實驗,當人群靠近藝術裝置時,牆體會彎曲、伸縮或延展。運動感測器可以和空調系統配對,感測器感應到房間內的人數變多時,會自動調節房間的溫度和環境照明。甚至有公司已經發明出智慧玻璃技術,當房間裡的人的密度達到一個標準值的時候,玻璃會自動變得不透明,可以給在會議室裡開會的人額外的隱私。
這個概念轉移到網頁設計上,就會有類似但全新的想法,為什麼我們要為每一種不同瀏覽設備又分別設計不同尺寸的網頁呢?網頁設計不應該為每個新的螢幕尺寸又額外提供無數個解決方案,網頁設計的格局應該要能夠自動調整。
隨著各家品牌的行動裝置發展快速,市面上的行動裝置有很多種不同尺寸的螢幕,而且這些設備通常都能隨著使用者的喜好可以將螢幕從縱向轉換成橫向瀏覽,如此多變的螢幕尺寸,網頁的大小又該如何能隨著這項多變的特性自動調適呢?
採用 RWD 設計的網站使用 CSS3 Media queries,即一種對 @media 規則的擴充,以及串流的基於比例的網格和自適應大小的圖片以適應不同大小的裝置: