響應式Web設計(簡稱RWD)是一種新的網站設計模式，以此構建的網站可自動適應不同的訪問設備(從桌面電腦、平板電腦到智能手機)，方便用戶閱讀和導航瀏覽，減少用戶的放大/縮小/滑動操作，從而提供完整而友好的用戶體驗。簡單的說，所謂的響應式Web設計（RWD），就是網頁內容會隨著訪問它的視口（viewport）及設備（device）的不同而呈現不同的樣式，從而使用戶獲得更好的體驗。
各大專業(yè)名詞解釋
- 響應式Web設計
”響應式Web設計“這個名字是Ethan Marcotte在2010年發(fā)明的。當時，他在A List Apart上寫了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），這篇文章綜合運用了三種已有技術（彈性網格布局、彈性圖片/媒體、媒體查詢）實現了一個解決方案，就叫”響應式Web設計“
- HTML
超文本標記語言(英文名：HyperText Markup Language，簡稱為HTML)，是一種為“網頁創(chuàng)建和其它可在網頁瀏覽器中看到的信息”設計的置標語言。HTML5是指萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改。
- CSS
CSS（層疊樣式表）是一種用來表現HTML或XML等文件樣式的計算機語言，CSS不僅可以靜態(tài)地修飾網頁，還可以配合各種腳本語言動態(tài)地對網頁各元素進行格式化。CSS3是CSS技術的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展。
- JaveScript
Javascript，一種高級編程語言，通過解釋執(zhí)行，是一門動態(tài)類型，面向對象（基于原型）的直譯語言。雖與Java有很多相似性，但這兩門編程語言從設計之初就有很大的不同。
RWD的三種技術
- 彈性網格布局（fluid grid）
彈性布局是2009年w3c提出的一種可以簡潔、快速彈性布局的屬性，主要思想是給予容器控制內部元素高度和寬度的能力，旨在為網頁提供最大的靈活性。
- 彈性圖片（flxible images）
彈性圖片指的是不給圖片設置固定尺寸，而是根據流體網格進行縮放，用于適應各種網格的尺寸。
- 媒體查詢（media queries）
通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適合相應的設備顯示。
為何需要響應式網頁設計？
下圖是美國一家名為statcounter的網站提供的關于全球設備分辨率使用率的數據比較，很顯然，設備的分辨率多種多樣，且短時間內不會被某種分辨率所取代。
在進行網頁開發(fā)時，工作人員需要針對不同分辨率的設備設計網頁，而響應式網頁設計可以自動適當顯示于各種不同裝置，包含桌機、手機、平板等，根據不一樣的屏幕大小設計友善的閱讀介面，使網站可以被各種族群閱讀。當然，在進行網站維修時，也不像以往一般需要多次同步資料，大大的減少了工作人員的工作量。
RWD和前后端的關系
- 前端
通常說的前端泛指Web前端，也就是在Web應用中用戶可以看得見碰得著的東西，包括Web頁面的結構、Web的外觀視覺表現以及Web層面的交互實現。
- 后端
后端更多的是與數據庫進行交互以處理相應的業(yè)務邏輯。需要考慮的是如何進行功能、數據的存取和平臺的穩(wěn)定性和功能等。
簡單點來說，前端就是對網頁進行設計，后端就是對網頁進行開發(fā)。在各大公司中，一般要求從事前端的人員熟悉HTML、CSS和JavaScript，而后端人員則要求對Web開發(fā)的模式有較深的理解。
使用了響應式網頁設計的例子
這是使用了響應式Web設計的網站：https://www.aboutnic.com/caseDetail.asp?id=4&pid=629&attrid=
這是沒有使用響應式Web設計的網站：https://www.bilibili.com/
