第一章
所謂 響應(yīng)式Web設(shè)計是钥，就是網(wǎng)頁內(nèi)容會隨著訪問它的視口及設(shè)備的不同而呈現(xiàn)不同的樣式个曙。
響應(yīng)式Web設(shè)計這個名字是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è)計”看尼。
- 彈性網(wǎng)格布局( fluid grid )
- 彈性圖片/媒體( flexible images )
- 媒體查詢（media queries）
- 視口（viewport）
- 設(shè)備（device）
1.名詞解釋
-
固定寬度
目標(biāo)是讓所有用戶都擁有相同的體驗
StatCounter是美國一家網(wǎng)站通訊流量監(jiān)測機(jī)構(gòu)，提供各種類型的統(tǒng)計報告以及網(wǎng)站流量統(tǒng)計服務(wù)盟步。
用戶嵌入StatCounter 代碼后狡忙，可以查看網(wǎng)站訪問量、訪問來源址芯、訪問地區(qū)灾茁、瀏覽器類型等。StatCounter統(tǒng)計功能強(qiáng)大谷炸、頁面比較簡潔北专，還可以當(dāng)做計數(shù)器使用，用戶也可以隱藏統(tǒng)計圖標(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ī)語言驶睦。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è)計和前端開發(fā)憋他，前端設(shè)計一般可以理解為網(wǎng)站的視覺設(shè)計孩饼，前端開發(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è)計,包括數(shù)據(jù)庫設(shè)計動態(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īng)式網(wǎng)頁設(shè)計是一個不可或缺的存在镰吵。
3.有無采用響應(yīng)式Web設(shè)計的例子對比
-
采用了響應(yīng)式Web設(shè)計的網(wǎng)站：花瓣網(wǎng)
花瓣網(wǎng) -
無采用響應(yīng)式Web設(shè)計：中大南方官網(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è)計的網(wǎng)站的體驗顯然更好啦辐。第一谓传，響應(yīng)式網(wǎng)站可以根據(jù)不同終端、不同尺寸和不同應(yīng)用環(huán)境芹关，自動調(diào)整界面布局续挟、展示內(nèi)容、內(nèi)容大小侥衬，提供非常好視覺展示效果诗祸，給用戶帶來了良好的體驗跑芳。第二，它可以節(jié)省成本直颅，不再需要有人特地維護(hù)PC頁面博个，移動頁面，節(jié)省人力物力功偿。
前端（front-end）苍匆，通常是指念搬，網(wǎng)站的前臺部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層乙埃。因此前端技術(shù)一般分為前端設(shè)計和前端開發(fā)版仔，前端設(shè)計一般可以理解為網(wǎng)站的視覺設(shè)計，前端開發(fā)則是網(wǎng)站的前臺代碼實(shí)現(xiàn)吨瞎，包括基本的HTML和CSS以及JavaScript/ajax痹兜，現(xiàn)在最新的高級版本HTML5、CSS3颤诀，以及SVG等字旭。
后端(backend)，后端開發(fā)應(yīng)是指后臺程序設(shè)計,包括數(shù)據(jù)庫設(shè)計動態(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)。
以上為我的課堂整理和思考疆液。
