第一章
所謂 響應(yīng)式Web設(shè)計(jì)，就是網(wǎng)頁內(nèi)容會隨著訪問它的視口及設(shè)備的不同而呈現(xiàn)不同的樣式。
響應(yīng)式Web設(shè)計(jì)這個名字是Ethan Marcotte在2010年發(fā)明的。當(dāng)時，他在A List Apart上寫了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），這篇文章綜合運(yùn)用了三種已有技術(shù)（彈性網(wǎng)格布局、彈性圖片/媒體、媒體查詢）實(shí)現(xiàn)了一個解決方案，就叫“響應(yīng)式Web
設(shè)計(jì)”。
- 彈性網(wǎng)格布局( fluid grid )
- 彈性圖片/媒體( flexible images )
- 媒體查詢（media queries）
- 視口（viewport）
- 設(shè)備（device）
1.名詞解釋
-
固定寬度
目標(biāo)是讓所有用戶都擁有相同的體驗(yàn)
StatCounter是美國一家網(wǎng)站通訊流量監(jiān)測機(jī)構(gòu)，提供各種類型的統(tǒng)計(jì)報告以及網(wǎng)站流量統(tǒng)計(jì)服務(wù)。
用戶嵌入StatCounter 代碼后，可以查看網(wǎng)站訪問量、訪問來源、訪問地區(qū)、瀏覽器類型等。StatCounter統(tǒng)計(jì)功能強(qiáng)大、頁面比較簡潔，還可以當(dāng)做計(jì)數(shù)器使用，用戶也可以隱藏統(tǒng)計(jì)圖標(biāo)。
-
彈性網(wǎng)格（flexible grids）
可基于屏幕分辨率擴(kuò)展或拉伸內(nèi)容。
-
媒體查詢（media queries）
是放在站點(diǎn)HTML和樣式表中的代碼段，用來收集設(shè)備顯示能力的信息以支持多種形式的界面。
-
視口（viewport）
瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域
-
CSS（層疊樣式表）
是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。 CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
-
前端（front-end）
通常是指，網(wǎng)站的前臺部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術(shù)一般分為前端設(shè)計(jì)和前端開發(fā)，前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺設(shè)計(jì)，前端開發(fā)則是網(wǎng)站的前臺代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級版本HTML5、CSS3，以及SVG等。
-
javascript
一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。
-
后端(backend)
后端開發(fā)應(yīng)是指后臺程序設(shè)計(jì),包括數(shù)據(jù)庫設(shè)計(jì)動態(tài)代碼編寫,一般需要掌握下面幾種語言和數(shù)據(jù)庫:ACCESS,SQL,HTML,ASP,PHP,JSP,.Net,VBscript 或Javascript.
-
文本編輯器/工具
文本編輯器(或稱文字編輯器)是用作編寫普通文字的應(yīng)用軟件，它與文檔編輯器(或稱文字處理器)不同之處在于它并非用作桌面排版(例如文檔格式處理)，它常用來編寫程序的源代碼。
例如Sublime Text、Vim、Coda、Visual Studio、Notepad
2.
從StatCounter提供的信息中，可以發(fā)現(xiàn)原本在2016年之前桌面的市場份額大于移動和tablet的市場份額，并且移動的市場份額一直呈上升的趨勢，但在16年11月之后，移動的市場份額超越了桌面市場。這說明了越來越多的人們使用移動上網(wǎng)，為了讓使用手機(jī)上網(wǎng)的用戶更好的上網(wǎng)體驗(yàn)，響應(yīng)式網(wǎng)頁設(shè)計(jì)是一個不可或缺的存在。
3.有無采用響應(yīng)式Web設(shè)計(jì)的例子對比
-
采用了響應(yīng)式Web設(shè)計(jì)的網(wǎng)站：花瓣網(wǎng)
花瓣網(wǎng) -
無采用響應(yīng)式Web設(shè)計(jì)：中大南方官網(wǎng)
中大南方官網(wǎng)
彈性網(wǎng)格（flexible grids），可基于屏幕分辨率擴(kuò)展或拉伸內(nèi)容。
媒體查詢（media queries），是放在站點(diǎn)HTML和樣式表中的代碼段，用來收集設(shè)備顯示能力的信息以支持多種形式的界面。
視口（viewport），瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域
在上述二者的例子中，我們可以發(fā)現(xiàn)采用了響應(yīng)式設(shè)計(jì)的網(wǎng)站的體驗(yàn)顯然更好。第一，響應(yīng)式網(wǎng)站可以根據(jù)不同終端、不同尺寸和不同應(yīng)用環(huán)境，自動調(diào)整界面布局、展示內(nèi)容、內(nèi)容大小，提供非常好視覺展示效果，給用戶帶來了良好的體驗(yàn)。第二，它可以節(jié)省成本，不再需要有人特地維護(hù)PC頁面，移動頁面，節(jié)省人力物力。
前端（front-end），通常是指，網(wǎng)站的前臺部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術(shù)一般分為前端設(shè)計(jì)和前端開發(fā)，前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺設(shè)計(jì)，前端開發(fā)則是網(wǎng)站的前臺代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級版本HTML5、CSS3，以及SVG等。
后端(backend)，后端開發(fā)應(yīng)是指后臺程序設(shè)計(jì),包括數(shù)據(jù)庫設(shè)計(jì)動態(tài)代碼編寫,一般需要掌握下面幾種語言和數(shù)據(jù)庫:ACCESS,SQL,HTML,ASP,PHP,JSP,.Net,VBscript 或Javascript.
一個網(wǎng)站的呈現(xiàn)需要前端與后端的相互合作。前端負(fù)責(zé)網(wǎng)站的頁面結(jié)構(gòu)，外觀視覺以及獲取用戶信息；后端則負(fù)責(zé)業(yè)務(wù)邏輯，實(shí)現(xiàn)功能、數(shù)據(jù)的存取、平臺的穩(wěn)定性與性能等。二者的相互合作，保證了網(wǎng)站的正常運(yùn)轉(zhuǎn)。
以上為我的課堂整理和思考。
