一、名詞解釋
- 響應(yīng)式Web設(shè)計(jì)：綜合運(yùn)用彈性網(wǎng)格布局、彈性圖片/媒體、媒體查詢實(shí)現(xiàn)的網(wǎng)頁內(nèi)容會(huì)隨著視口及設(shè)備的不同呈現(xiàn)不同的樣式。于2010年Ethan Marcotte發(fā)明，在A LIst Apart上提出。
- RWD（Responsive Web Design）為響應(yīng)式設(shè)計(jì)的英文解釋。
- CCS（Cascading Style Sheets）：層疊樣式表，是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言）的一個(gè)應(yīng)用或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。CSS3為CSS的升級(jí)版本。
- 視口(viewport)：瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域，視口通常并不等于屏幕大小，特別是可以縮放瀏覽器窗口的情況下。
- 前端（front-end）：對于網(wǎng)站來說通常是指網(wǎng)站的前臺(tái)部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術(shù)一般分為前端設(shè)計(jì)和前端開發(fā)，前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺設(shè)計(jì)，前端開發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級(jí)版本HTML5、CSS3，以及SVG等。
-后端（back-end）：指網(wǎng)站的邏輯部分，主要涉及數(shù)據(jù)庫，動(dòng)態(tài)語言如PHP、ASP、JSP等。 - HTML5：萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言的第五次重大修改。
二、為什么需要“響應(yīng)式網(wǎng)頁設(shè)計(jì)”？
全球桌面與移動(dòng)與平板電腦市場份額
全球屏幕分辨率統(tǒng)計(jì)表
圖片來源市場調(diào)查機(jī)構(gòu)statcounter
戳這里更多調(diào)查圖表可見 市場調(diào)查機(jī)構(gòu)statcounter
通過以上兩張圖標(biāo)可以清晰的看出全球的智能手機(jī)用戶的數(shù)量已超過PC端的用戶數(shù)量，用1366x768的屏幕分辨率的設(shè)備（電腦）的趨勢在不斷下降，反之用360x640的屏幕分辨率的設(shè)備（手機(jī)）的趨勢在不斷攀升。由此可見如今越來越多的人使用手機(jī)上網(wǎng)，但利用電腦的人也不在少數(shù)，因此，想要實(shí)現(xiàn)的網(wǎng)頁內(nèi)容在視口及設(shè)備不同的情況下應(yīng)用，響應(yīng)式Web設(shè)計(jì)無疑是最佳選擇。
三、響應(yīng)式設(shè)計(jì)例子
天貓
百度百科
由以上兩張圖片我們可以看出天貓并未使用響應(yīng)式網(wǎng)頁設(shè)計(jì)，而百度百科則使用了響應(yīng)式網(wǎng)頁設(shè)計(jì)。
四、RWD的三項(xiàng)科技組成
- 彈性網(wǎng)格布局（fluid grid）：圖片的尺寸可以被自動(dòng)調(diào)整，頁面布局再不會(huì)被破壞。無論用戶切換設(shè)備的屏幕定向方式，還是從臺(tái)式機(jī)屏幕轉(zhuǎn)到iPad上瀏覽，頁面都會(huì)真正的富有彈性。
- 彈性圖片（flexible image）： 不僅能同比的縮放圖片，還要在小設(shè)備上降低圖片自身的分辨率。其原理為rwd-images.js會(huì)檢測當(dāng)前設(shè)備的屏幕分辨率，如果是大屏幕設(shè)備，則向頁面head部分中添加BASE標(biāo)記，并將后續(xù)的圖片、腳本和樣式表加載請求定向到一個(gè)虛擬路徑"/rwd-router"。當(dāng)這些請求到達(dá)服務(wù)器端，.htacces文件會(huì)決定這些請求所需要的是原始圖片還是小尺寸的"響應(yīng)式圖片"，并進(jìn)行相應(yīng)的反饋輸出。對于小屏幕的移動(dòng)設(shè)備，原始尺寸的大圖片永遠(yuǎn)不會(huì)被用到。
- 媒體查詢（media queries）：媒體查詢是界面為了適應(yīng)不同屏幕大小而存在的。媒體查詢 是評(píng)估 True 或 False 的一種表達(dá)。如果為 True，則繼續(xù)使用樣式表。如果為 False，則不能使用樣式表。這種簡單邏輯能夠更靈活地對特定的設(shè)計(jì)場景使用自定義的顯示規(guī)則。媒體查詢包含一個(gè)媒體類型，后跟一個(gè)或多個(gè)檢查特定條件（如最小的屏幕寬度）的表達(dá)式。
五、RWD與前后端：
在軟件架構(gòu)和程序設(shè)計(jì)領(lǐng)域，前端是軟件系統(tǒng)中直接和用戶交互的部分，而后端控制著軟件的輸出。將軟件分為前端和后端是一種將軟件不同功能的部分相互分離的抽象。
- 前端：用互聯(lián)網(wǎng)來做比喻,凡是通過瀏覽器到用戶端計(jì)算機(jī)的統(tǒng)稱為前端技術(shù)，前端三要素包括HTML+CSS+JavaScript，前端技術(shù)包括JavaScript、ActionScript、CSS、xHTML等“傳統(tǒng)”技術(shù)與Adobe AIR、Google Gears,以及概念性較強(qiáng)的交互式設(shè)計(jì),藝術(shù)性較強(qiáng)的視覺設(shè)計(jì)等等。Web前端開發(fā)要為網(wǎng)站上提供的產(chǎn)品和服務(wù)實(shí)現(xiàn)一流的Web界面，優(yōu)化代碼并保持良好兼容性。在前端開發(fā)人員需要熟練運(yùn)用ES6新增語法，利用AJAX技術(shù)與后臺(tái)進(jìn)行數(shù)據(jù)交互、熟練使用JQuery語法、封裝和發(fā)布JQuery插件等技術(shù)操作。
- 后端：后端更多的是與數(shù)據(jù)庫進(jìn)行交互以處理相應(yīng)的業(yè)務(wù)邏輯，需要考慮的是如何實(shí)現(xiàn)功能、數(shù)據(jù)的存取、平臺(tái)的穩(wěn)定性與性能等。要求后端開發(fā)人員會(huì)寫Java代碼，會(huì)寫SQL語句，能做簡單的數(shù)據(jù)庫設(shè)計(jì)，會(huì)Spring和iBatis，懂一些設(shè)計(jì)模式等。
前端就是前臺(tái)顯示，比如打開一個(gè)網(wǎng)站你看到的就是前端。后端就是網(wǎng)站信息管理（信息或新聞發(fā)布、修改、刪除）俗稱后臺(tái)管理。兩者相輔相成，共同完成一個(gè)網(wǎng)頁的應(yīng)用與呈現(xiàn)。
Marcotte于2010年在A List Apart上發(fā)表的關(guān)于響應(yīng)式web設(shè)計(jì)原文
