名詞解釋
響應(yīng)式Web設(shè)計（RWD）
網(wǎng)頁內(nèi)容會隨著訪問它的視口及設(shè)備的不同而呈現(xiàn)不同的樣式。
超文本標記語言（HTML）
HTML是一種規(guī)范亿虽，一種標準合住，它通過標記符號來標記要顯示的網(wǎng)頁中的各個部分。
層疊樣式表（CSS）
是一種用來表現(xiàn)HTML或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言瓣铣。
視口（viewport）
瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域炮叶。
彈性網(wǎng)格布局（fluid grid）
網(wǎng)格布局支持彈性尺寸（flex-size）碗旅，彈性尺寸使用fr尺寸單位鹊杖，其來自 "fraction" 或 "fractional unit" 單詞的前兩個字母，表示整體空間的一部分扛芽。
彈性圖片（flxible images）
指的是不給圖片設(shè)置固定尺寸骂蓖，而是根據(jù)流體網(wǎng)格進行縮放，用于適應(yīng)各種網(wǎng)格的尺寸川尖。
媒體查詢（media queries）
包含媒體類型和零個或多個檢測媒體特性的表達式登下。width，height和color都是可用于媒體查詢的特性叮喳。使用媒體查詢被芳，可以不必修改內(nèi)容本身，而讓網(wǎng)頁適配不同的設(shè)備馍悟。
為何需要“響應(yīng)式網(wǎng)頁設(shè)計”畔濒？
響應(yīng)式Web設(shè)計是一種統(tǒng)一的解決方案，可以讓Web作品適配手機锣咒，平板和電腦桌面侵状。響應(yīng)式的網(wǎng)站可以適應(yīng)用戶的屏幕大小，為今天和明天的設(shè)備都提供最佳用戶體驗毅整。下面是互聯(lián)網(wǎng)與新媒體市場調(diào)查機構(gòu)stat counter調(diào)查全球屏幕分辨率的數(shù)據(jù)表格：
從表格可以看出趣兄，市場上各類電子產(chǎn)品分辨率非常的多，所以為了所有用戶都可以得到最佳的上網(wǎng)體驗悼嫉，響應(yīng)式網(wǎng)頁設(shè)計的出現(xiàn)很有必要艇潭。
下面我將舉2個網(wǎng)站的例子，1個網(wǎng)站采用了響應(yīng)式Web設(shè)計戏蔑，另一個則沒有蹋凝，我們可以進行對比看看有什么不同。
采用了響應(yīng)式Web設(shè)計網(wǎng)站：蘋果官網(wǎng)
未采用響應(yīng)式Web設(shè)計網(wǎng)站：淘寶網(wǎng)
對比2個網(wǎng)站可以看出总棵，采用了響應(yīng)式Web設(shè)計的網(wǎng)站可以根據(jù)屏幕分辨率不同而呈現(xiàn)不同的樣式鳍寂，給了用戶更好的體驗。
RWD和前后端的關(guān)系
Web前端就是在Web應(yīng)用中用戶可以看得見碰得著的東西彻舰。包括Web頁面的結(jié)構(gòu)伐割、Web的外觀視覺表現(xiàn)以及Web層面的交互實現(xiàn)。
Web后端更多的是與數(shù)據(jù)庫進行交互以處理相應(yīng)的業(yè)務(wù)邏輯刃唤。需要考慮的是如何實現(xiàn)功能、數(shù)據(jù)的存取白群、平臺的穩(wěn)定性與性能等尚胞。
RWD一詞提出人Ethan Marcotte
Ethan Marcotte是一位獨立的網(wǎng)頁設(shè)計師，他非常關(guān)心漂亮的設(shè)計帜慢，優(yōu)雅的代碼以及兩者的交集笼裳。多年來唯卖，他的客戶包括紐約雜志，圣丹斯電影節(jié)躬柬，波士頓環(huán)球報和人物雜志拜轨。
