名詞解釋
(來(lái)源：《響實(shí)》及網(wǎng)絡(luò)）
- 響應(yīng)式Web設(shè)計(jì)（Responsive Web Design）: 簡(jiǎn)稱(chēng)RWD饭入，網(wǎng)頁(yè)內(nèi)容會(huì)隨著訪(fǎng)問(wèn)它的視口及設(shè)備（device）的不同而呈現(xiàn)的樣式（style）排苍。
“響應(yīng)式Web設(shè)計(jì)”這個(gè)名字是Ethan Marcotte在2010年發(fā)明的。當(dāng)時(shí)袁铐，他在A(yíng) List Apart上寫(xiě) 了一篇文章（http://www.alistapart.com/articles/responsive-web-design/）揭蜒，這篇文章綜合運(yùn)用了三種 已有技術(shù)（彈性網(wǎng)格布局、彈性圖片/媒體剔桨、媒體查詢(xún)）實(shí)現(xiàn)了一個(gè)解決方案屉更，就叫“響應(yīng)式Web 設(shè)計(jì)”。
視口（viewport）：瀏覽器中用于呈現(xiàn)網(wǎng)頁(yè)的區(qū)域叫視口洒缀。
彈性網(wǎng)格布局（fliud grid） ：主要使用百分比來(lái)設(shè)置各個(gè)部分的寬度 , 用來(lái)適應(yīng)不同的分辨率 瑰谜。有時(shí)候 , 對(duì)于網(wǎng)頁(yè)中的某一部分元素 (比如邊界值 , 側(cè)邊欄 ), 可以使用固定寬度 , 但大部分元素是使用百分比來(lái)控制的 。
彈性圖片/媒體（flexible images）：彈性圖片指的是不給圖片設(shè)置固定尺寸树绩，而是根據(jù)流體網(wǎng)格進(jìn)行縮放萨脑，用于適應(yīng)各種網(wǎng)格的尺寸。
媒體查詢(xún)（media queries）：媒體查詢(xún)包含媒體類(lèi)型和零個(gè)或多個(gè)檢測(cè)媒體特性的表達(dá)式饺饭。width渤早、height和color都是可用于媒體查詢(xún)的特性。使用媒體查詢(xún)瘫俊，可以不必修改內(nèi)容本身鹊杖，而讓網(wǎng)頁(yè)適配不同的設(shè)備提鸟。
前端（backend）:前端對(duì)于網(wǎng)站來(lái)說(shuō)，通常是指仅淑，網(wǎng)站的前臺(tái)部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術(shù)一般分為前端設(shè)計(jì)和前端開(kāi)發(fā)胸哥，前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺(jué)設(shè)計(jì)涯竟，前端開(kāi)發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax空厌，現(xiàn)在最新的高級(jí)版本HTML5庐船、CSS3，以及SVG等嘲更。
后端（frontend）：后端更多的是與數(shù)據(jù)庫(kù)進(jìn)行交互以處理相應(yīng)的業(yè)務(wù)邏輯筐钟。需要考慮的是如何實(shí)現(xiàn)功能、數(shù)據(jù)的存取赋朦、平臺(tái)的穩(wěn)定性與性能等篓冲。
集成開(kāi)發(fā)環(huán)境(IDE):集成開(kāi)發(fā)環(huán)境（IDE，Integrated Development Environment ）是用于提供程序開(kāi)發(fā)環(huán)境的應(yīng)用程序宠哄，一般包括代碼編輯器壹将、編譯器、調(diào)試器和圖形用戶(hù)界面等工具毛嫉。
超文本標(biāo)記語(yǔ)言(HTML): 超級(jí)文本標(biāo)記語(yǔ)言是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用诽俯，也是一種規(guī)范，一種標(biāo)準(zhǔn),它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分.
層疊樣式表（CSS ）:層疊樣式表(英文全稱(chēng)：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言承粤。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)暴区，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
javascript代碼：JS即Javascript辛臊，Javascript是一種由Netscape的LiveScript發(fā)展而來(lái)的腳本語(yǔ)言仙粱，主要目的是為了解決服務(wù)器終端語(yǔ)言。
W3C：（英文World Wide Web Consortium）萬(wàn)維網(wǎng)聯(lián)盟浪讳。
link（html標(biāo)簽）：<link> 標(biāo)簽定義文檔與外部資源的關(guān)系缰盏。
<link> 標(biāo)簽最常見(jiàn)的用途是鏈接樣式表。META標(biāo)簽：通常所說(shuō)的META標(biāo)簽淹遵，是在HTML網(wǎng)頁(yè)源代碼中一個(gè)重要的html標(biāo)簽口猜。META標(biāo)簽用來(lái)描述一個(gè)HTML網(wǎng)頁(yè)文檔的屬性，例如作者透揣、日期和時(shí)間济炎、網(wǎng)頁(yè)描述、關(guān)鍵詞辐真、頁(yè)面刷新等须尚。
為何需要"響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)"
根據(jù)statcounter 查詢(xún)的“2017.2—2018.2全球屏幕分辨率統(tǒng)計(jì)表”顯示崖堤，全球屏幕分辨率是多種多樣的，而響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是網(wǎng)頁(yè)內(nèi)容會(huì)隨著訪(fǎng)問(wèn)它的視口和設(shè)備的不同而呈現(xiàn)不同的樣式耐床，能自適應(yīng)不同的分辨率密幔。
根據(jù)“全球桌面與移動(dòng)與平板電腦市場(chǎng)份額表”可以大概知道不同設(shè)備的使用人數(shù)，由于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)越性撩轰，無(wú)論用戶(hù)使用筆記本還是iPad或手機(jī)胯甩，頁(yè)面都可以自動(dòng)切換適應(yīng)，這無(wú)疑省去了不少功夫堪嫂。
采用了響應(yīng)式Web設(shè)計(jì)例子：克羅地亞中國(guó)旅行社
網(wǎng)站鏈接：http://www.go2croatia.net/
沒(méi)有采用了響應(yīng)式Web設(shè)計(jì)例子：天貓
網(wǎng)站鏈接：https://jx.tmall.com/?ali_trackid=2:mm_28465560_38840923_145592982:1520758729_282_388081191
對(duì)比很明顯偎箫，采用了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的網(wǎng)站在不同設(shè)備的顯示更整潔明了，能根據(jù)設(shè)備的不同自適應(yīng)屏幕皆串，更改樣式淹办，看起來(lái)讓人感覺(jué)更舒服。但由于技術(shù)等原因恶复，天貓等大型網(wǎng)站并沒(méi)有采用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)怜森。
RWD的三項(xiàng)組成科技
RWD利用彈性網(wǎng)格布局、彈性圖片／媒體寂玲、媒體查詢(xún)等技術(shù)實(shí)現(xiàn)塔插。
（來(lái)源：教科書(shū)及網(wǎng)絡(luò)改）
①?gòu)椥跃W(wǎng)格和布局：百分比布局使得網(wǎng)頁(yè)寬度能夠隨著查看他們的屏幕窗口大小變化，因而得名彈性布局拓哟。使用彈性布局也輕松解決媒體查詢(xún)無(wú)法實(shí)現(xiàn)的“設(shè)計(jì)在媒體查詢(xún)斷點(diǎn)間的平滑過(guò)渡”這一問(wèn)題想许。但彈性布局雖然可以讓設(shè)計(jì)適應(yīng)較多場(chǎng)景，也包括某些尺寸的屏幕断序，有時(shí)卻也不夠用流纹，需要媒體查詢(xún)配合。
②彈性圖片／媒體：“彈性圖片指的是不給圖片設(shè)置固定尺寸违诗，而是根據(jù)流體網(wǎng)格進(jìn)行縮放漱凝，用于適應(yīng)各種網(wǎng)格的尺寸≈畛伲”
③媒體查詢(xún)：官方給媒體查詢(xún)下的定義是——“包含媒體類(lèi)型和零個(gè)或多個(gè)檢測(cè)媒體特性的表達(dá)式茸炒。width、height和color都是可用于媒體查詢(xún)的特性阵苇。使用媒體查詢(xún)壁公，可以不必修改內(nèi)容本身，而讓網(wǎng)頁(yè)適配不同的設(shè)備绅项∥刹幔”媒體查詢(xún)解決了一些彈性布局無(wú)法解決的問(wèn)題，相當(dāng)于css中基本的條件邏輯快耿。
RWD和前后端的關(guān)系
Web前端和后端之區(qū)分囊陡，以及面臨的挑戰(zhàn)——
http://blog.csdn.net/u013485792/article/details/52316512
常見(jiàn)技術(shù)安排：在訪(fǎng)客至數(shù)據(jù)庫(kù)/云端之間
前端芳绩、網(wǎng)頁(yè)伺服器、API伺服器撞反、后端數(shù)據(jù)庫(kù)/云端
常見(jiàn)人員安排：在平面設(shè)計(jì)至計(jì)算機(jī)科學(xué)之間
平面設(shè)計(jì)師妥色、前端工程師、后端工程師
RWD的前后端大多數(shù)情況下是相輔相成的遏片，但有的RWD需要依賴(lài)后端垛膝，有的則不需要。需要的比如網(wǎng)頁(yè)版丁稀、手機(jī)版等等分開(kāi)服務(wù)、設(shè)計(jì)倚聚、產(chǎn)出頁(yè)面线衫；不需要的通常是網(wǎng)頁(yè)版、手機(jī)版等等一起服務(wù)惑折、設(shè)計(jì)授账、產(chǎn)出頁(yè)面。
