響應式網頁設計（Responsive web design，通常縮寫為RWD），或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。 是一種網頁設計的技術做法，該設計可使網站在不同的裝置（從桌面電腦顯示器到行動電話或其他行動產品裝置）上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為。[1][2][3]對於網站設計師和前端工程師來說，有別於過去需要針對各種裝置進行不同的設計，使用此種設計方式將更易於維護網頁。此概念於2010年5月由國外著名網頁設計師Ethan Marcotte所提出。

RWD響應式網頁，如同水一樣，遇到怎樣的容器（螢幕）就變成怎樣的形狀，如下圖

由 Stéphanie Walter - http://www.inpixelitrust.fr/blog/illustration-content-is-like-water-et-traduction-responsive-webdesign-present-et-futur-de-ladaptation-mobile/, 創用CC 姓名標示-相同方式分享 3.0, https://commons.wikimedia.org/w/index.php?curid=26455176

 

採用 RWD 設計的網站使用CSS3 Media queries，即一種對 @media 規則的擴充功能，以及串流的基於比例的網格[9]和自適應大小的圖像以適應不同大小的裝置：
串流網格概念要求頁面元素使用相對單位如百分比或字型排印學調整大小，而不是絕對的單位如像素或點。
靈活的圖像也以相對單位調整大小（最大到 100%），以防止它們顯示在包含它們的元素外面。
Media queries允許網頁根據存取站點裝置的特點而使用不同 CSS 樣式規則，最常用的是瀏覽器的寬度。
回應式網頁設計變得更加重要，因為移動流量現在占網際網路流量的一半以上。因此，Google宣布行動裝置時代的到來（Mobilegeddon）（2015年4月21日），並開始提高移動友好的網站的評級，如果搜尋是被從一個行動裝置發起。

 

----出處：維基百科