專業(yè)術(shù)語
響應(yīng)式Web設(shè)計（RWD）：網(wǎng)頁內(nèi)容會隨著訪問它的視口及設(shè)備的不同而呈現(xiàn)不同的樣式灯荧，相關(guān)的基本要素：彈性布局溢吻、彈性圖片和媒體查詢。
（http://www.alistapart.com/articles/responsive-web-design/）HTML：超文本標(biāo)記語言，準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用俺夕∩淹梗“ 超文本”就是指頁面內(nèi)可以包含圖片、 鏈接劝贸，甚至音樂姨谷、 程序等非文字元素。超文本標(biāo)記語言的結(jié)構(gòu)包括 “頭”部分（英語：Head）映九、和“主體”部分（英語：Body）梦湘，其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的 具體內(nèi)容件甥。
CSS:層疊樣式表捌议，是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁引有，還可配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化瓣颅。有三種方法可以在站點網(wǎng)頁上使用樣式表：外部樣式表、內(nèi)部樣式表和內(nèi)聯(lián)樣式譬正。
JavaScript：一種高級編程語言宫补，通過解釋執(zhí)行，是一門動態(tài)類型曾我，面向?qū)ο螅ɑ谠停┑闹弊g語言粉怕。是一門基于原型、函數(shù)先行的語言抒巢，是一門多范式的語言贫贝，它支持面向?qū)ο缶幊蹋钍骄幊膛扒兀约昂瘮?shù)式編程平酿。它提供語法來操控文本、數(shù)組悦陋、日期以及正則表達式的宿主環(huán)境提供支持蜈彼，被世界上的絕大多數(shù)網(wǎng)站所使用，也被世界主流瀏覽器（Chrome俺驶、IE幸逆、FireFox等）支持。
最小寬度媒體查詢：在這個媒體查詢中設(shè)置的CSS規(guī)則暮现，只在視口符合最小定義寬度條時才會應(yīng)用到網(wǎng)頁还绘。實際的最小寬度可以使用不同的長度單位指定，比如百分比栖袋、em拍顷、rem和px。
斷點：某個寬度臨界點塘幅，跨過這個點布局會發(fā)生顯著變化昔案。
主要問題
RWD的三項組成科技
彈性網(wǎng)格布局（fluid grid）：網(wǎng)格是一組相交的水平線和垂直線尿贫，它定義了網(wǎng)格的列和行。我們可以將網(wǎng)格元素放置在與這些行和列相關(guān)的位置上踏揣。CSS網(wǎng)格布局具有以下特點：
---- 固定的位置和彈性的軌道的大星焱觥：你可以使用固定的軌道尺寸創(chuàng)建網(wǎng)格，比如使用像素單位捞稿。你也可以使用比如百分比或者專門為此目的創(chuàng)建的新單位 fr來創(chuàng)建有彈性尺寸的網(wǎng)格又谋。
---- 元素位置：你可以使用行號、行名或者標(biāo)定一個網(wǎng)格區(qū)域來精確定位元素娱局。網(wǎng)格同時還使用一種算法來控制未給出明確網(wǎng)格位置的元素彰亥。
---- 創(chuàng)建額外的軌道來包含元素：可以使用網(wǎng)格布局定義一個顯式網(wǎng)格，但是根據(jù)規(guī)范它會處理你加在網(wǎng)格外面的內(nèi)容铃辖，當(dāng)必要時它會自動增加行和列剩愧，它會盡可能多的容納所有的列。
---- 對齊控制：網(wǎng)格包含對齊特點娇斩，以便我們可以控制一旦放置到網(wǎng)格區(qū)域中的物體對齊仁卷，以及整個網(wǎng)格如何對齊。
---- 控制重疊內(nèi)容：多個元素可以放置在網(wǎng)格單元格中犬第，或者區(qū)域可以部分地彼此重疊锦积。然后可以CSS中的z-index屬性來控制重疊區(qū)域顯示的優(yōu)先級。
彈性圖片（flexide images）：不給圖片設(shè)置固定尺寸,而是根據(jù)流體網(wǎng)格進行縮放,用于適應(yīng)各種網(wǎng)格的尺寸歉嗓。
媒體查詢（media queries）：讓我們在某些條件下（如寬度和高度為多少的情況下）為網(wǎng)頁應(yīng)用樣式丰介。
RWD與前后端的關(guān)系
-- 前端（frontground）：網(wǎng)頁伺服器，API伺服器
-- 后端（background）：數(shù)據(jù)庫/云端
在訪客至數(shù)據(jù)庫/云端之間鉴分，前端的網(wǎng)頁伺服器與API伺服器處理將用戶的數(shù)據(jù)經(jīng)過處理上傳的數(shù)據(jù)庫或者云端哮幢，由后端進行數(shù)據(jù)分析及連接，然后反饋給前端呈現(xiàn)出網(wǎng)頁志珍。
-- 需要依賴后端方案的RWD：
網(wǎng)頁版橙垢、手機版、等等分開服務(wù)伦糯、設(shè)計柜某、產(chǎn)出頁面
-- 不需要依賴后端方案的RWD：
網(wǎng)頁版、手機版敛纲、等等一起服務(wù)喂击、設(shè)計、產(chǎn)出頁面
-- 基于HTML5和CSS3就可以制作不需要后端方案的RWD
為什么需要響應(yīng)式Web設(shè)計淤翔？
以前的網(wǎng)站固定寬度通常為960px翰绊，而比這個更寬的電腦設(shè)備飛速發(fā)展
全球手機瀏覽器的使用量開始超過PC瀏覽器
響應(yīng)式Web讓W(xué)eb作品適配手機、平板和桌面電腦，適應(yīng)用戶的屏幕大小监嗜，為今天和明天的設(shè)備都提供最佳用戶體驗琳要。
-
僅使用HTML5和CSS3，而不用后端支持秤茅。
（http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet）
屏幕分辨率統(tǒng)計-201702-201802.png
采用了響應(yīng)式Web設(shè)計的網(wǎng)站（https://www.bbc.co.uk/）
未采取響應(yīng)式Web設(shè)計的網(wǎng)站（http://www.nfsysu.cn/）
