響應(yīng)式網(wǎng)頁設(shè)計(jì)

定義：

• 響應(yīng)式Web設(shè)計(jì)(Responsive Web design)是：頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺虚茶、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整薄风，是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。是基于HTML5和CSS3的RWD(Responsive Web Design)響應(yīng)式Web設(shè)計(jì)。利用彈性網(wǎng)格布局(fluid grid)、彈性圖片／媒體(flxible images)江咳、媒體查詢(media queries)等技術(shù)實(shí)現(xiàn)。

RWD是什么

1.面對不斷擴(kuò)展的瀏覽器和設(shè)備應(yīng)對方案

2. 可以讓一個網(wǎng)站同時適配多種設(shè)備和多個屏幕
   3.可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小哥放、輸入方式歼指、設(shè)備/瀏覽器能力）而變化
   4.基于HTML5和CSS3的RWD不需要以來后端方案

為何需要"響應(yīng)式網(wǎng)頁設(shè)計(jì)"

來自http://gs.statcounter.com 的數(shù)據(jù)

響應(yīng)式網(wǎng)頁設(shè)計(jì)是互聯(lián)網(wǎng)迅速發(fā)展時代的必要產(chǎn)物。根據(jù)調(diào)查甥雕，手機(jī)在2017年的三月到2018年踩身，都一直居高臨下，也就是說社露，隨著手機(jī)的廣泛使用挟阻，人們對人性化和便捷化的網(wǎng)頁的要求越來越高。而且手機(jī)的類型各種各樣，每一種手機(jī)都會有自己所屬于的分辨率附鸽，這也是為什么響應(yīng)式設(shè)計(jì)是一個十分必要的選擇脱拼。如果沒有使用響應(yīng)式網(wǎng)頁設(shè)計(jì)，那么設(shè)計(jì)師就要為每一種分辨率設(shè)計(jì)一種代碼坷备，這是幾乎不可能的事熄浓。

例子：

• 響應(yīng)式網(wǎng)頁設(shè)計(jì)如今的應(yīng)用已經(jīng)越來越寬泛了，比如我們所熟悉的購物網(wǎng)站--淘寶省撑，也是用了響應(yīng)式設(shè)計(jì)：
  
  微信圖片_20180309104342.png
  
  （具體的操作請點(diǎn)擊鏈接：https://www.taobao.com/）
• 而同樣作為購物網(wǎng)站赌蔑，天貓卻沒有使用響應(yīng)式設(shè)計(jì)：
  
  微信圖片_20180309104023.png
  
  （具體的操作請點(diǎn)擊鏈接：https://www.tmall.com/?ali_trackid=2:mm_26632323_6762370_25910656:1520562918_305_1678265331）
• 同樣作為購物網(wǎng)站，為什么天貓沒有采用響應(yīng)式設(shè)計(jì)竟秫，而淘寶卻有呢娃惯？原因之一猜測是即使做了響應(yīng)式設(shè)計(jì)，只會導(dǎo)致需要加載的css文件更大肥败，頁面加載的資源體積不會更小石景，而響應(yīng)式設(shè)計(jì)通常是面向移動端的場景，依靠移動數(shù)據(jù)加載會比桌面端慢得多也會消耗更多用戶關(guān)心的流量拙吉，與其這樣不如重定向到一個單獨(dú)的輕量級的基于H5的web app潮孽，也便于分離和定制。
  鏈接：https://www.zhihu.com/question/22016859/answer/22393957

關(guān)系：

上課圖片

• 想必很多人都不了解RWD的前端和后端的關(guān)系吧筷黔，（其實(shí)我也不是很清楚）往史，但沒關(guān)系，因?yàn)榫W(wǎng)絡(luò)幾乎是萬能的佛舱。RWD的前后端既有聯(lián)系椎例，又有區(qū)別
• 區(qū)別：

• Web前端: 前端泛指Web前端，也就是在Web應(yīng)用中用戶可以看得見碰得著的東西请祖。包括Web頁面的結(jié)構(gòu)订歪、Web的外觀視覺表現(xiàn)以及Web層面的交互實(shí)現(xiàn)。web前端需要掌握的有腳本技術(shù)javascript DIV+CSS現(xiàn)下最流行的頁面搭建技術(shù)肆捕，ajax和jquery以及簡單的后端程序等刷晋。
• Web后端：后端更多的是與數(shù)據(jù)庫進(jìn)行交互以處理相應(yīng)的業(yè)務(wù)邏輯。需要考慮的是如何實(shí)現(xiàn)功能慎陵、數(shù)據(jù)的存取眼虱、平臺的穩(wěn)定性與性能等。 后端的話可供開發(fā)的語言有 asp席纽、php捏悬、jsp、.NET 這些后端開發(fā)語言的話搭建環(huán)境都不一樣润梯。
  鏈接：[WED前端和后端的區(qū)別]（http://www.aseoe.com/show-23-391-1.html）

• 聯(lián)系：

1过牙、不管是前端還是后端甥厦，他們的最終目的是為了整個網(wǎng)絡(luò)網(wǎng)頁所服務(wù)的，前端和后端是相互配合的關(guān)系寇钉，盡管他們所負(fù)責(zé)的工作是不一樣的矫渔。

• 比如：RWD前端：精通HTML，能夠書寫語義合理摧莽，結(jié)構(gòu)清晰庙洼，易維護(hù)的HTML結(jié)構(gòu)。 2）精通CSS镊辕，能夠還原視覺設(shè)計(jì)油够，并兼容業(yè)界承認(rèn)的主流瀏覽器。3）熟悉JavaScript征懈，了解ECMAScript基礎(chǔ)內(nèi)容石咬，掌握1~2種js框架，如JQuery卖哎；
• RWD后端;精通面向?qū)ο蠓治龊驮O(shè)計(jì)技術(shù)鬼悠，包括設(shè)計(jì)模式、UML建模等; 5）熟悉網(wǎng)絡(luò)編程亏娜，具有設(shè)計(jì)和開發(fā)對外API接口經(jīng)驗(yàn)和能力焕窝，同時具備跨平臺的API規(guī)范設(shè)計(jì)以及API高效調(diào)用設(shè)計(jì)能力

2、前端和后端在同一個Web時维贺，是需要簽訂一個“協(xié)議”的它掂。如果web應(yīng)用是基于API的，那么API文檔就是你們之間的協(xié)議如果web應(yīng)用是基于template rendering的溯泣，那么Django的template就是你們之間的協(xié)議（自然前端是需要懂一些template語言的虐秋，Django有針對前端開發(fā)者的template文檔），而協(xié)議就是前后端協(xié)作的基礎(chǔ)和規(guī)范垃沦。
3客给、 前端發(fā)來請求，后端解析發(fā)來的請求字段肢簿，然后去數(shù)據(jù)庫取數(shù)據(jù)出來傳遞給前端靶剑。你所需要做的就是寫好文檔，說明這個接口返回什么數(shù)據(jù)類型译仗，是json還是字符串還是具體什么抬虽，如果是json還得說明一下里面有哪些返回值.

組成：

在WRD有幾個關(guān)鍵組成部分：

• viewport meta標(biāo)簽： 頁面頭部的meta說明官觅，可以通過viewport meta標(biāo)簽去讓你的html頁面的的寬度能根據(jù)設(shè)備分辨率讓瀏覽器的可視寬度來適應(yīng)纵菌，也可以在這里設(shè)置頁面的縮放比例等等，這樣在成比例的分辨率設(shè)備下休涤，就可以更簡單地實(shí)現(xiàn)響應(yīng)式咱圆。

• 彈性網(wǎng)格布局：網(wǎng)格布局是一種新的布局方法笛辟，該方法使你能夠基于固定數(shù)量、瀏覽器窗口中的可用空間或二者組合劃分網(wǎng)頁主要區(qū)域的空間序苏。通過將網(wǎng)格布局與媒體查詢（@media）結(jié)合使用手幢，可以使布局無縫地適應(yīng)設(shè)備外形尺寸、方向忱详、可用空間等因素的變化围来。

• 響應(yīng)式圖片：根據(jù)用戶的設(shè)備和使用場景提供合適的圖片？匈睁？监透？

• 媒體查詢：媒體查詢包含媒體類型和零個或多個檢測媒體特性的表達(dá)式。width航唆，height和color都可用于媒體查詢的特性胀蛮。使用媒體查詢，可以不必修改內(nèi)容本身糯钙，而讓網(wǎng)頁適配不同的設(shè)備粪狼。

• 具體內(nèi)容請點(diǎn)擊鏈接：https://www.douban.com/group/topic/37338038/
  http://blog.sina.com.cn/s/blog_b363cedf0101eewi.html

介紹：http://alistapart.com/article/responsive-web-design

• 響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)將當(dāng)前Web設(shè)計(jì)中熱門的響應(yīng)式設(shè)計(jì)技術(shù)與HTML5和CSS3結(jié)合起來，為讀者全面深入地講解了針對各種屏幕大小設(shè)計(jì)和開發(fā)現(xiàn)代網(wǎng)站的各種技術(shù)任岸。不僅討論了媒體查詢再榄、流式布局、相對字體享潜、響應(yīng)式媒體不跟，更將HTML5和CSS3的相關(guān)知識點(diǎn)一并講解，是學(xué)習(xí)最新Web設(shè)計(jì)技術(shù)不可多得的佳作米碰。
  《響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)》適合各個層次的Web開發(fā)和設(shè)計(jì)人員閱讀窝革。響應(yīng)式Web設(shè)計(jì)