為什么要建立響應式網頁設計？
隨著通過手機和平板電腦登錄的用戶數量的增加，智能站點所有者（其中很多是電子商務領域的所有者）意識到，他們必須迅速找到一種回收該細分市場的方法。
即使結合了跨瀏覽器功能，用于PC上顯示的站點仍在小型移動設備上提供了本質上不可用的體驗。重新設計仍然不能完全令人滿意，因此有些人只是簡單地建立了第二個站點，專門針對移動設備。
當然，重復的站點存在其自身的問題，但有些人認為風險可以接受……至少比失去很大一部分市場份額更可接受。
一個單獨的站點意味著一開始和正在進行的額外費用。有許多負面影響，收益有限。更糟糕的是，它仍然只滿足一些移動顯示問題。簡而言之，這不是解決方案。這只是一個創可貼。
用正確的方式做事
隨著HTML5 + CSS3的出現，似乎有更好的方法來完成很少有人管理的事情，并在單個站點上完成。HTML5得到了足夠的關注，人們開始注意到它。
然后，當W3C將媒體查詢添加到組合中時，一些開發人員意識到了這種可能性，并決定對其進行測試。也許不是為預期的顯示類型設計站點，而是標準化的站點設計可以使任何尺寸的顯示都合理。
RWD如何運作？
RWD的主要概念是創建一個基本設計，并通過使用CSS覆蓋布局結構來使其具有適應性，并根據顯示設備的視口創建流暢的布局。
因此，iPhone可能會顯示一列布局，而平板電腦會顯示兩列，而PC會顯示四列…全部通過CSS3進行媒體查詢。
使用HTML5 + CSS3，可以通過將頁眉，頁腳，側邊欄和內容封裝在換頁容器中來啟用此功能。然后將HTML5元素重置為阻止。
基本設計是在標準CSS中處理的，但是媒體查詢會選擇各種CSS3元素，以根據所服務的設備自定義布局。
最后，各種元素的顯示寬度由標準的百分比設置，以適合每個移動設備，就像處理圖像和嵌入式視頻一樣。