名詞解釋
(來源：《響實》及網(wǎng)絡）
- 響應式Web設計（Responsive Web Design）: 簡稱RWD，網(wǎng)頁內(nèi)容會隨著訪問它的視口及設備（device）的不同而呈現(xiàn)的樣式（style）。
“響應式Web設計”這個名字是Ethan Marcotte在2010年發(fā)明的。當時，他在A List Apart上寫 了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），這篇文章綜合運用了三種 已有技術（彈性網(wǎng)格布局、彈性圖片/媒體、媒體查詢）實現(xiàn)了一個解決方案，就叫“響應式Web 設計”。
視口（viewport）：瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域叫視口。
彈性網(wǎng)格布局（fliud grid） ：主要使用百分比來設置各個部分的寬度 , 用來適應不同的分辨率 。有時候 , 對于網(wǎng)頁中的某一部分元素 (比如邊界值 , 側(cè)邊欄 ), 可以使用固定寬度 , 但大部分元素是使用百分比來控制的 。
彈性圖片/媒體（flexible images）：彈性圖片指的是不給圖片設置固定尺寸，而是根據(jù)流體網(wǎng)格進行縮放，用于適應各種網(wǎng)格的尺寸。
媒體查詢（media queries）：媒體查詢包含媒體類型和零個或多個檢測媒體特性的表達式。width、height和color都是可用于媒體查詢的特性。使用媒體查詢，可以不必修改內(nèi)容本身，而讓網(wǎng)頁適配不同的設備。
前端（backend）:前端對于網(wǎng)站來說，通常是指，網(wǎng)站的前臺部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術一般分為前端設計和前端開發(fā)，前端設計一般可以理解為網(wǎng)站的視覺設計，前端開發(fā)則是網(wǎng)站的前臺代碼實現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級版本HTML5、CSS3，以及SVG等。
后端（frontend）：后端更多的是與數(shù)據(jù)庫進行交互以處理相應的業(yè)務邏輯。需要考慮的是如何實現(xiàn)功能、數(shù)據(jù)的存取、平臺的穩(wěn)定性與性能等。
集成開發(fā)環(huán)境(IDE):集成開發(fā)環(huán)境（IDE，Integrated Development Environment ）是用于提供程序開發(fā)環(huán)境的應用程序，一般包括代碼編輯器、編譯器、調(diào)試器和圖形用戶界面等工具。
超文本標記語言(HTML): 超級文本標記語言是標準通用標記語言下的一個應用，也是一種規(guī)范，一種標準,它通過標記符號來標記要顯示的網(wǎng)頁中的各個部分.
層疊樣式表（CSS ）:層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。
javascript代碼：JS即Javascript，Javascript是一種由Netscape的LiveScript發(fā)展而來的腳本語言，主要目的是為了解決服務器終端語言。
W3C：（英文World Wide Web Consortium）萬維網(wǎng)聯(lián)盟。
link（html標簽）：<link> 標簽定義文檔與外部資源的關系。
<link> 標簽最常見的用途是鏈接樣式表。META標簽：通常所說的META標簽，是在HTML網(wǎng)頁源代碼中一個重要的html標簽。META標簽用來描述一個HTML網(wǎng)頁文檔的屬性，例如作者、日期和時間、網(wǎng)頁描述、關鍵詞、頁面刷新等。
為何需要"響應式網(wǎng)頁設計"
根據(jù)statcounter 查詢的“2017.2—2018.2全球屏幕分辨率統(tǒng)計表”顯示，全球屏幕分辨率是多種多樣的，而響應式網(wǎng)頁設計就是網(wǎng)頁內(nèi)容會隨著訪問它的視口和設備的不同而呈現(xiàn)不同的樣式，能自適應不同的分辨率。
根據(jù)“全球桌面與移動與平板電腦市場份額表”可以大概知道不同設備的使用人數(shù)，由于響應式網(wǎng)頁設計的優(yōu)越性，無論用戶使用筆記本還是iPad或手機，頁面都可以自動切換適應，這無疑省去了不少功夫。
采用了響應式Web設計例子：克羅地亞中國旅行社
網(wǎng)站鏈接：http://www.go2croatia.net/
沒有采用了響應式Web設計例子：天貓
網(wǎng)站鏈接：https://jx.tmall.com/?ali_trackid=2:mm_28465560_38840923_145592982:1520758729_282_388081191
對比很明顯，采用了響應式網(wǎng)頁設計的網(wǎng)站在不同設備的顯示更整潔明了，能根據(jù)設備的不同自適應屏幕，更改樣式，看起來讓人感覺更舒服。但由于技術等原因，天貓等大型網(wǎng)站并沒有采用響應式網(wǎng)頁設計。
RWD的三項組成科技
RWD利用彈性網(wǎng)格布局、彈性圖片／媒體、媒體查詢等技術實現(xiàn)。
（來源：教科書及網(wǎng)絡改）
①彈性網(wǎng)格和布局：百分比布局使得網(wǎng)頁寬度能夠隨著查看他們的屏幕窗口大小變化，因而得名彈性布局。使用彈性布局也輕松解決媒體查詢無法實現(xiàn)的“設計在媒體查詢斷點間的平滑過渡”這一問題。但彈性布局雖然可以讓設計適應較多場景，也包括某些尺寸的屏幕，有時卻也不夠用，需要媒體查詢配合。
②彈性圖片／媒體：“彈性圖片指的是不給圖片設置固定尺寸，而是根據(jù)流體網(wǎng)格進行縮放，用于適應各種網(wǎng)格的尺寸?！?/p>
③媒體查詢：官方給媒體查詢下的定義是——“包含媒體類型和零個或多個檢測媒體特性的表達式。width、height和color都是可用于媒體查詢的特性。使用媒體查詢，可以不必修改內(nèi)容本身，而讓網(wǎng)頁適配不同的設備?！泵襟w查詢解決了一些彈性布局無法解決的問題，相當于css中基本的條件邏輯。
RWD和前后端的關系
Web前端和后端之區(qū)分，以及面臨的挑戰(zhàn)——
http://blog.csdn.net/u013485792/article/details/52316512
常見技術安排：在訪客至數(shù)據(jù)庫/云端之間
前端、網(wǎng)頁伺服器、API伺服器、后端數(shù)據(jù)庫/云端
常見人員安排：在平面設計至計算機科學之間
平面設計師、前端工程師、后端工程師
RWD的前后端大多數(shù)情況下是相輔相成的，但有的RWD需要依賴后端，有的則不需要。需要的比如網(wǎng)頁版、手機版等等分開服務、設計、產(chǎn)出頁面；不需要的通常是網(wǎng)頁版、手機版等等一起服務、設計、產(chǎn)出頁面。
