名詞解釋

• 響應(yīng)式Web設(shè)計(jì)( Responsive Web Design RWD)：

1 是一種網(wǎng)頁設(shè)計(jì)的技術(shù)做法，該設(shè)計(jì)可使網(wǎng)站在多種瀏覽設(shè)備（從桌面電腦顯示器到移動(dòng)電話或其他流動(dòng)產(chǎn)品裝置）上閱讀和導(dǎo)航咪橙，同時(shí)減少縮放聂宾、平移和滾動(dòng)愁拭。 via 知乎

2 內(nèi)容布局能隨用戶使用顯示器的不同而變化。 via百度

3網(wǎng)頁內(nèi)容會(huì)隨著訪問它的視口及設(shè)備的不同而呈現(xiàn)不同的樣式亏吝。via課本

• 視口(viewport):瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域
• 斷點(diǎn)( breakpoint )：某個(gè)寬度臨界點(diǎn)岭埠，跨過這個(gè)點(diǎn)布局就會(huì)發(fā)生顯著變化。斷點(diǎn)應(yīng)該由你自己的項(xiàng)目設(shè)計(jì)決定蔚鸥。
• 前端(frontend):指網(wǎng)站的前臺(tái)部分惜论。網(wǎng)站的視覺設(shè)計(jì)，應(yīng)用產(chǎn)品是用戶看到止喷，接觸到和體驗(yàn)到馆类，他們主要做靜態(tài)用戶界面加上一些動(dòng)態(tài)效果，不涉及數(shù)據(jù)邏輯弹谁，前端考慮到的是用戶體驗(yàn)
• 后端(backend):程序設(shè)計(jì)架構(gòu)思想乾巧，管理數(shù)據(jù)庫(kù)。
• 彈性布局：百分比布局使得網(wǎng)頁寬度能夠隨著查看他們的屏幕窗口大小變化
• Internet Explorer 11（簡(jiǎn)稱IE11）是微軟開發(fā)網(wǎng)頁瀏覽器预愤，是Internet Explorer 10的下一代
• 集成開發(fā)環(huán)境（IDE沟于，Integrated Development Environment ）是用于提供程序開發(fā)環(huán)境的應(yīng)用程序，一般包括代碼編輯器植康、編譯器旷太、調(diào)試器和圖形用戶界面等工具。
• 文本編輯器

1. Microsoft Visual Studio（簡(jiǎn)稱VS）是美國(guó)微軟公司的開發(fā)工具包系列產(chǎn)品销睁。
2. Sublime Text 是一個(gè)代碼編輯器也是HTML和散文先進(jìn)的文本編輯器供璧。它最初被設(shè)計(jì)為一個(gè)具有豐富擴(kuò)展功能的Vim。
3. Coda是Panic推出適用在Mac上的網(wǎng)頁開發(fā)工具
4. notepad（記事本）是代碼編輯器或WINDOWS中的小程序冻记，用于文本編輯

• CSS預(yù)處理器：基于 CSS 擴(kuò)展了一套屬于自己的 DSL睡毒，來解決我們書寫 CSS 時(shí)難以解決的問題。手工做的事自動(dòng)化

三項(xiàng)組合技術(shù)

• 彈性圖片( fluid grid):不給圖片設(shè)置固定尺寸冗栗，而是根據(jù)流體網(wǎng)格進(jìn)行縮放演顾，用于適應(yīng)各種網(wǎng)格的尺寸。img {max-width:100%;}
• 彈性網(wǎng)格布局(fluid grid)：給予容器控制內(nèi)部元素高度和寬度的能力贞瞒，利用 例如利用< div class="div" style="flex-basis:80px">項(xiàng)目在主軸上占據(jù)的空間偶房，定義表格為80像素
• 媒體查詢(media queries)
  功能

1 媒體類型和零個(gè)或多個(gè)檢測(cè)媒體特性的表達(dá)式趁曼。
2 可以不必修改內(nèi)容本身军浆，而讓網(wǎng)頁適配不同的設(shè)備。
3 具有在CSS中實(shí)現(xiàn)條件邏輯的能力
4 可以從整體上修改一個(gè)網(wǎng)站的布局和外觀

標(biāo)簽
<link> 詢問設(shè)備的類型和特性
<meta>可以在其中設(shè)置像素

學(xué)習(xí)Marcotte

• 我建立了一個(gè)簡(jiǎn)單的頁面為一個(gè)假設(shè)的雜志;這是一個(gè)建立在一個(gè)簡(jiǎn)單的兩列布局流體網(wǎng)格不少靈活的圖像的挡闰∑谷冢——彈性圖片
• 我們可以設(shè)計(jì)一個(gè)最佳的觀看體驗(yàn),但基于標(biāo)準(zhǔn)的技術(shù)嵌入到我們的設(shè)計(jì)不僅讓他們更靈活,更適應(yīng)媒體呈現(xiàn)掰盘。——所謂”漸進(jìn)增強(qiáng)“
• 媒體查詢?cè)试S我們目標(biāo)不僅是某些設(shè)備類,但實(shí)際檢查設(shè)備的物理特性呈現(xiàn)我們的工作——即是又媒體類型和媒體特征

為何需要響應(yīng)式設(shè)計(jì)

• statcounter分析
  Screen Resolution Stats Worldwide
  （時(shí)間：2017年2月 - 2018年2月）

image.png

• 結(jié)論：
  1.這個(gè)表格是屏幕分辨率是全世界使用頻率排名前三的三種赞季。從對(duì)應(yīng)的產(chǎn)品生產(chǎn)來看使用手機(jī)頻率是最高的愧捕。但后兩者都是電腦。從而看出當(dāng)今人們的生活總在手機(jī)與電腦中切換申钩。而如果你設(shè)計(jì)的頁面只適應(yīng)在電腦上才有較好的既視感次绘。而在手機(jī)上需要用戶自行拖拉，排版很亂撒遣。并且在這種盛行使用手機(jī)的時(shí)代邮偎，那豈不是會(huì)讓人舍棄你的產(chǎn)品。所以你需要設(shè)計(jì)一個(gè)可以即滿足電腦又滿足手機(jī)的平面設(shè)計(jì)
  2.如果我們采用后端那樣先把可能呈現(xiàn)的平面都設(shè)計(jì)出來义黎，這樣很費(fèi)時(shí)間禾进。但是響應(yīng)式設(shè)計(jì)可以讓前端人員只需要開發(fā)一次就好，pc廉涕、觸屏泻云、手機(jī)版都可以使用。這樣既有效 率狐蜕，又可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境而變化

例子

• 運(yùn)用響應(yīng)式設(shè)計(jì)http://packdog.com/preview
  菜單會(huì)在上方宠纯，當(dāng)?shù)竭_(dá)632×787這一斷點(diǎn)后會(huì)把菜單隱藏。圖片先才有浮動(dòng)排至最右邊經(jīng)過斷點(diǎn)后圖片會(huì)變成符合手機(jī)滑動(dòng)方式單張如雜志般滾動(dòng)
• 沒有使用響應(yīng)式設(shè)計(jì) http://m.wufazhuce.com/
• 比較

• 效果
  運(yùn)用響應(yīng)式前后比較
  image.png
  
  
  image.png

image.png

image.png

響應(yīng)式與前后端關(guān)系

• 訪問者(visitors)會(huì)在前端網(wǎng)站輸入用戶信息，前端就會(huì)把client(顧客）的要求通過網(wǎng)絡(luò)服務(wù)（web services）傳給后端治力，后端的工作人員(staff)便會(huì)在數(shù)據(jù)庫(kù)（data base)里找到符合顧客要求的東西再傳致網(wǎng)絡(luò)服務(wù)供用戶使用蒙秒。

API可以簡(jiǎn)單的理解為一個(gè)URL地址。具體來說是前端頁面向API發(fā)送了一個(gè)請(qǐng)求的數(shù)據(jù)A宵统，后端接收到A晕讲，根據(jù)業(yè)務(wù)的需求將A變成處理后的數(shù)據(jù)B，并把B返回給前端頁面上马澈。這個(gè)過程中前端不知道也不必知道API內(nèi)部是如何工作的瓢省，前端只需要根據(jù)發(fā)送的數(shù)據(jù)獲取到需要的數(shù)據(jù)。后端的工作就是接收前端發(fā)來的數(shù)據(jù)痊班，處理后返回給前端使用勤婚。

• http://www.reibang.com/p/84ea06be0278 前后端
• https://www.imooc.com/wenda/detail/271938
• http://blog.csdn.net/jiangbo_phd/article/details/45501151 彈性圖片
• https://www.cnblogs.com/nuannuan7362/p/5823381.html flex彈性布局
• https://alistapart.com/article/responsive-web-design Marcotte對(duì)響應(yīng)式介紹