名詞解釋
響應式Web設計
- 解釋：網頁內容會隨著訪問它的視口及設備的不同而呈現(xiàn)不同的樣式
- 思路：先為小屏幕設計內容、樣式，然后再向大屏幕擴展
- 優(yōu)勢： 不需要依賴服務端或后端方案
- 3W： Ethan Marcotte、2010年、在A List Apart上寫了一篇文章
那篇文章綜合運用了三種已有技術（彈性網格布局、彈性圖片/媒體、媒體查詢）實現(xiàn)了一個解決方案，就叫“響應式Web設計（http://www.alistapart.com/articles/responsive-web-design/）
瀏覽器支持
- 一般來說，要支持的瀏覽器版本越早，想達到現(xiàn)代瀏覽器中相同功能和效果所需的工作量就越大。
- 做法：先寫一個較輕量的代碼架構，然后根據所需的體驗針對能力更強的瀏覽器進行擴展，包括視覺和功能。
- 漸進增強（優(yōu)選）：從最簡單的“基本”體驗開始，逐步擴充
- 平穩(wěn)退化：先做出大而全的版本，后再針對能力不足的平臺尋找后備方案
IE（Internet Explorer）
微軟公司推出的一款網頁瀏覽器。原稱Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7、8、9、10、11版本)，簡稱IE。2015年3月微軟確認將放棄IE品牌。轉而在windows 10上，Microsoft Edge取代了。2016年1月12日，微軟公司宣布于這一天停止對IE 8/9/10三個版本的技術支持。
IDE（Integrated Development Environment）
- 解釋：集成開發(fā)環(huán)境，用于提供程序開發(fā)環(huán)境的應用程序
- 工具：一般包括代碼編輯器、編譯器、調試器和圖形用戶界面等，集成了代碼編寫功能、分析功能、編譯功能、調試功能等一體化的開發(fā)軟件服務套。
- 常見IDE
① Microsoft Visual Studio
（簡稱VS）是微軟公司的開發(fā)工具包系列產品。VS是一個基本完整的開發(fā)工具集，它包括了整個軟件生命周期中所需要的大部分工具，如UML工具、代碼管控工具、集成開發(fā)環(huán)境（IDE）等等。所寫的目標代碼適用于微軟支持的所有平臺。Visual Studio產品包含C++、C#和VB.NET語言。還可以為Windows x86、Windows RT和Windows手機做開發(fā)。最新版被優(yōu)化為可用于觸摸，方便使用Microsoft Surface平板進行編程的開發(fā)者。開發(fā)者需要付費購買。
② Eclipse
著名的跨平臺開源IDE。最初主要用來Java語言開發(fā)，目前亦有人通過插件使其作為C++、Python、PHP等其他語言的開發(fā)工具。Eclipse的本身只是一個框架平臺，但是眾多插件的支持，使得Eclipse擁有較佳的靈活性，所以許多軟件開發(fā)商以Eclipse為框架開發(fā)自己的IDE。
viewport
瀏覽器中用于呈現(xiàn)網頁的區(qū)域叫視口，通常并不等于屏幕大小，特別是可以縮放瀏覽器窗口的情況下。
斷點
- 某個寬度臨界點，跨過這個點布局就會發(fā)生顯著變化
- 斷點應該由內容和設計本身決定
HTML
- 超文本標記語言，標準通用標記語言下的一個應用。超文本就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
- 超文本標記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關于網頁的信息，“主體”部分提供網頁的具體內容。
CSS
- 層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
- 可以靜態(tài)地修飾網頁，也可以配合各種腳本語言動態(tài)地對網頁各元素進行格式化。
Javascript
- 一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態(tài)功能。
- 基本特點：
①是一種解釋性腳本語言（代碼不進行預編譯）。
②主要用來向HTML頁面添加交互行為。
③可以直接嵌入HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。
④跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。
RWD
- 響應式網站設計(簡稱RWD)是一種新的網站設計模式，以此構建的網站可自動適應不同的訪問設備(從桌面電腦、平板電腦到智能手機)，方便用戶閱讀和導航瀏覽，減少用戶的放大/縮小/滑動操作，從而提供完整而友好的用戶體驗。
- ▲三個關鍵組成部分：
①media query：基于RWD而設計的網站利用CSS3 media queries規(guī)則來自動適應不同訪問設備的屏幕尺寸和顯示要求。
②流動網格：采用頁面元素大小的相對單位(百分比或EM)，而非傳統(tǒng)設計使用的絕對單位(像素或點數)，以確定頁面各組成元素的大小。
③靈活縮放的圖片：圖片大小也是采用相對單位而靈活縮放，不至于在小屏幕的移動設備上超出顯示區(qū)域。 -
▲前后端關系
前后端關系
前端：即瀏覽器、API伺服器等訪客能夠看到的
后端：數據庫或云端
兩者關系：即前臺和后臺的關系。可以用餐廳打個比方，前臺是客戶，后臺是后廚等，而前后臺之間還有個銜接即上圖的Web services是走動于大堂與后廚的服務生，通過作為聯(lián)結前后的服務生實現(xiàn)前后臺的交流與呈現(xiàn)。瀏覽器等訪客看到的是后廚完成的菜品，而后廚擁有的則是各種原生食材即數據庫。但在人員安排上前后臺還有平面設計師、前端工程師與后端工程師間的區(qū)分。
為何需要響應式網頁設計
通過互聯(lián)網與新媒體市場調查機構gs.statcounter.com上的圖表數據，我們或許可以獲得這個問題的答案。
全球桌面與移動與平板電腦市場份額2016年1月至12月
全球屏幕分辨率統(tǒng)計2017.2至2018.2
- 分析：圖一為全球2016年桌面、移動與平板電腦的市場份額。我們可以清晰的看到，整個16年平板的市場份額持續(xù)低迷。在三月中下旬時移動與桌面的市場份額出現(xiàn)了交叉點，之后移動平緩上升，桌面出現(xiàn)了下降。
圖二為全球2017-2018的屏幕分辨率統(tǒng)計，各種分辨率的占比都在大小幅度的上升，分辨率趨向多樣化。 - 為何：通過以上兩個圖表數據的分析，證明了新時代下設備的各有不同，訪問視口的種類繁多，網頁內容需要面對不同設備來呈現(xiàn)不同樣式，不再單一局限。為了滿足設備需求和用戶體驗，務必采用響應式網頁設計，通過“漸進增強”的方法加以實現(xiàn)。
是否采用響應式Web設計之對比
- 采用（QQ音樂官網）
QQ音樂 - 未采用（天貓官網）
天貓 - 對比
通過以上兩張網站截圖可以明顯的看出，采用響應式Web設計的網頁可以給用戶帶來更便捷優(yōu)越的體驗，提高頁面的瀏覽速度，頁面能被更廣泛的設備訪問。QQ音樂可以適應各式大小的屏幕，頁面整體字體圖片等會隨屏幕變化用戶不必擔憂字體的過大過小而看不清楚。天貓因未采用響應式Web設計而使網頁很大程度上散失了靈活性的體驗。
注明：以上藍色字體的均引用來源于百度
