什么是響應(yīng)式Web設(shè)計肆饶？

“響應(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)格布局胰舆、彈性圖片/媒體册舞、媒體查詢）實現(xiàn)了一個解決方案蕴掏，就叫“響應(yīng)式Web 設(shè)計”。 ——《響應(yīng)式Web設(shè)計HTML5和CSS3實戰(zhàn)》
響應(yīng)式網(wǎng)站設(shè)計(Response Web design调鲸，簡稱RWD)是一種新的網(wǎng)站設(shè)計模式盛杰，以此構(gòu)建的網(wǎng)站可自動適應(yīng)不同的訪問設(shè)備(從桌面電腦、平板電腦到智能手機(jī))藐石，方便用戶閱讀和導(dǎo)航瀏覽即供，減少用戶的放大/縮小/滑動操作，從而提供完整而友好的用戶體驗于微《旱眨——百度百科

通俗一點(diǎn)，響應(yīng)式web設(shè)計可以檢測到用戶的設(shè)備尺寸株依、系統(tǒng)平臺（到底是蘋果的呢驱证？還是安卓的呢？還是其他恋腕。）還有屏幕定向抹锄，它會根據(jù)不同的情況顯示出不同的內(nèi)容頁面排版。
它就像是水一樣吗坚，你將它裝在水壺里祈远，那么它就是它就是水壺的樣子呆万，你將它裝在杯子里商源，那么它就是被子的樣子，它將它放在盆子里谋减，那么它就是水盆的樣子……無論你用什么設(shè)備打開牡彻，它總會以合適的樣子出現(xiàn)在你的眼前。

• RWD的三種組成科技
  • 彈性網(wǎng)格布局
    默認(rèn)情況下出爹，網(wǎng)頁布局是彈性的庄吼。也就是說你打開一個頁面，縮放瀏覽器窗口严就，你會看見文本會根據(jù)屏幕縮放自動重排总寻。以iphone手機(jī)為例，iOS會默認(rèn)會按照980像素寬度來渲染（或者叫排版梢为？）網(wǎng)頁渐行，然后再把頁面縮小呈現(xiàn)在視口當(dāng)中轰坊。瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域叫視口（viewpoint）。視口并不等于屏幕的大小祟印，特別是可以縮放瀏覽器窗口的情況下肴沫。在這種情況下網(wǎng)頁往往會是等比例的縮小，文字一般是較小的字號蕴忆，用戶的使用體驗較差颤芬。但是RWD的彈性網(wǎng)絡(luò)布局根據(jù)屏幕大小的不同，針對屏幕的大小對網(wǎng)頁的文字重新編排套鹅，達(dá)到便于用戶瀏覽站蝠、使用的結(jié)果。
  • 彈性圖片/媒體
    在沒有RWD情況下芋哭，網(wǎng)頁往往會按照之前圖片原本的像素展現(xiàn)在視口前沉衣，有的時候會圖片的像素過大，我們會看到整個屏幕“塞不下”這張圖片的結(jié)果减牺，但是RWD的彈性圖片效果可以根據(jù)我們用戶使用的不同屏幕尺寸改變圖片的像素豌习，從而達(dá)到屏幕能夠“塞下”這張照片并且便于我們?yōu)g覽的結(jié)果。
  • 媒體查詢

  媒體查詢可以讓我們在某些條件下（如寬度和高度為多少的情況下）為網(wǎng)頁應(yīng)用樣式——《響應(yīng)式Web設(shè)計HTML5和CSS3實戰(zhàn)》
  使用媒體查詢拔疚，你可以針對不同的媒體類型定義不同的樣式肥隆。
  媒體查詢可以針對不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計響應(yīng)式的頁面稚失，媒體查詢是非常有用的栋艳。
  當(dāng)你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面句各∥迹——RUNOOB.COM

RED中的前端與后端的關(guān)系？

前端凿宾，我們簡單粗暴點(diǎn)往往對應(yīng)的是網(wǎng)頁設(shè)計師矾屯；而后端我們對應(yīng)的是網(wǎng)頁開發(fā)者，也稱程序員初厚。

Web前端:
顧名思義是來做Web的前端的件蚕。這里所說的前端泛指Web前端，也就是在Web應(yīng)用中用戶可以看得見碰得著的東西产禾。包括Web頁面的結(jié)構(gòu)排作、Web的外觀視覺表現(xiàn)以及Web層面的交互實現(xiàn)。
Web后端：
后端更多的是與數(shù)據(jù)庫進(jìn)行交互以處理相應(yīng)的業(yè)務(wù)邏輯亚情。需要考慮的是如何實現(xiàn)功能妄痪、數(shù)據(jù)的存取、平臺的穩(wěn)定性與性能等楞件。

我們?yōu)槭裁葱枰憫?yīng)式網(wǎng)頁設(shè)計（RWD）衫生？

以往響應(yīng)式web設(shè)計并不能檢測到用戶的設(shè)備環(huán)境僧著，只能是按照后端程序員所設(shè)定的樣子，顯示出所限定版面障簿，在一定的程度上影響了用戶的使用的感受盹愚。又或者是后端準(zhǔn)備好幾套的方案，一套是給電腦用的站故，一套是給蘋果用得皆怕，一套是給安卓用戶用的……這樣的工作量是十分龐大的，而且多套方案的做法難以應(yīng)對不斷發(fā)展的西篓，不斷生產(chǎn)出新事物的網(wǎng)絡(luò)世界愈腾。

2016年全球手機(jī)、手提岂津、臺式電腦市場份額.jpg

在以往虱黄，網(wǎng)頁所面對的受眾大部分是手提電腦、臺式電腦吮成，近年來移動端的高速發(fā)展橱乱，讓生產(chǎn)者不得不重視手機(jī)用戶的使用體驗，而在2016年10月粱甫、11月前后泳叠，手機(jī)移動端超越手提電腦占據(jù)著大部分的市場份額。

2017.2-2018.2全球移動設(shè)備供應(yīng)商的市場份額.jpg

RWD的優(yōu)越所在

以移動端為例

某中學(xué)網(wǎng)站.jpg

中山大學(xué)官網(wǎng).jpg