名詞解釋
1夫植、響應(yīng)式web設(shè)計(jì)：響應(yīng)式web設(shè)計(jì)可以讓一個(gè)網(wǎng)站同時(shí)適配多種設(shè)備和多個(gè)屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小油讯，輸入方式详民，設(shè)備/瀏覽器能力）而變化∧岸遥基于HTML5和CSS3的的響應(yīng)式web設(shè)計(jì)沈跨，并不需要依賴服務(wù)端或后端方案。
2兔综、RWD：響應(yīng)式網(wǎng)站設(shè)計(jì)(簡(jiǎn)稱RWD)是一種新的網(wǎng)站設(shè)計(jì)模式饿凛，以此構(gòu)建的網(wǎng)站可自動(dòng)適應(yīng)不同的訪問(wèn)設(shè)備(從桌面電腦、平板電腦到智能手機(jī))软驰，方便用戶閱讀和導(dǎo)航瀏覽涧窒，減少用戶的放大/縮小/滑動(dòng)操作，從而提供完整而友好的用戶體驗(yàn)锭亏。
3纠吴、HTML5：萬(wàn)維網(wǎng)的核心語(yǔ)言、標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言（HTML）的第五次重大修改慧瘤。
4呜象、CSS3：CSS3是CSS（層疊樣式表）技術(shù)的升級(jí)版本膳凝，于1999年開(kāi)始制訂，2001年5月23日W3C完成了CSS3的工作草案恭陡，主要包括盒子模型、列表模塊上煤、超鏈接方式休玩、語(yǔ)言模塊、背景和邊框劫狠、文字特效拴疤、多欄布局等模塊。
5独泞、CSS3媒體查詢：可以讓我們針對(duì)特定的設(shè)備能力或條件為網(wǎng)頁(yè)應(yīng)用特定的CSS樣式呐矾。
6、JavaScript：JavaScript一種直譯式腳本語(yǔ)言懦砂，是一種動(dòng)態(tài)類型蜒犯、弱類型、基于原型的語(yǔ)言荞膘，內(nèi)置支持類型罚随。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分羽资，廣泛用于客戶端的腳本語(yǔ)言淘菩，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能
（注屠升，以上條目解釋摘自百度百科和書(shū)本《響應(yīng)式web設(shè)計(jì)》）
7潮改、流式網(wǎng)格：概念要求頁(yè)面元素使用相對(duì)單位如百分比或字體排印學(xué)調(diào)整大小，而不是絕對(duì)的單位如像素或點(diǎn)腹暖；
靈活的圖片：也以相對(duì)單位調(diào)整大谢阍凇（最大到 100%），以防止它們顯示在包含它們的元素外面微服；
媒體查詢：允許網(wǎng)頁(yè)根據(jù)訪問(wèn)站點(diǎn)設(shè)備的特點(diǎn)而使用不同 CSS 樣式規(guī)則趾疚，最常用的是瀏覽器的寬度。
——內(nèi)容摘自網(wǎng)站segmentfault中用戶“Bizhong”發(fā)表的《淺析RWD》一文
為何需要響應(yīng)式web設(shè)計(jì)
根據(jù)市場(chǎng)調(diào)查機(jī)構(gòu) statcounter 的數(shù)據(jù)顯示以蕴，在2016年至今糙麦，在2016年的十月份時(shí)候，世界上使用手機(jī)屏幕瀏覽的人數(shù)超過(guò)了使用電腦桌面瀏覽的人丛肮。
“現(xiàn)今赡磅，無(wú)論是移動(dòng)設(shè)備、平板電腦宝与、PC焚廊，屏幕大小各不相同冶匹，若是針對(duì)每個(gè)屏幕大小單獨(dú)設(shè)計(jì)一個(gè)解決方案，則會(huì)大幅增加網(wǎng)站建設(shè)的復(fù)雜程度和運(yùn)營(yíng)成本咆瘟。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的概念就是可以讓網(wǎng)頁(yè)根據(jù)用戶的使用環(huán)境進(jìn)行自動(dòng)調(diào)整嚼隘，有效的改善用戶體驗(yàn)√徊停”——引用網(wǎng)站segmentfault中用戶“Bizhong”發(fā)表的《淺析RWD》一文
這說(shuō)明了世界上許多人改變了他們的瀏覽環(huán)境飞蛹，從電腦到手機(jī)，也增加了人們對(duì)響應(yīng)式web設(shè)計(jì)的需求灸眼。
而且響應(yīng)式Web讓W(xué)eb作品適配手機(jī)卧檐、平板和桌面電腦，適應(yīng)用戶的屏幕大小焰宣，為今天和明天的設(shè)備都提供最佳用戶體驗(yàn)霉囚。
有無(wú)使用響應(yīng)式web設(shè)計(jì)的例子
網(wǎng)站bilibili沒(méi)有使用響應(yīng)式web設(shè)計(jì)https://www.bilibili.com/index.html
網(wǎng)站意派Coolsite360 使用了響應(yīng)式web設(shè)計(jì)http://www.coolsite360.com
RWD的三項(xiàng)關(guān)鍵
響應(yīng)式網(wǎng)站設(shè)計(jì)有三個(gè)關(guān)鍵組成部分：1. media query; 2. 流動(dòng)網(wǎng)格；3. 靈活縮放的圖片匕积。
基于RWD而設(shè)計(jì)的網(wǎng)站利用CSS3 media queries規(guī)則來(lái)自動(dòng)適應(yīng)不同訪問(wèn)設(shè)備的屏幕尺寸和顯示要求盈罐。而流動(dòng)網(wǎng)格采用頁(yè)面元素大小的相對(duì)單位(百分比或EM)，而非傳統(tǒng)設(shè)計(jì)使用的絕對(duì)單位(像素或點(diǎn)數(shù))闸天，以確定頁(yè)面各組成元素的大小暖呕。最后，圖片大小也是采用相對(duì)單位而靈活縮放苞氮，不至于在小屏幕的移動(dòng)設(shè)備上超出顯示區(qū)域湾揽。——內(nèi)容摘自百度百科
RWD和前后端的關(guān)系
需要依賴后端方案的RWD：
網(wǎng)頁(yè)版笼吟、手機(jī)版库物、等等分開(kāi)服務(wù)、設(shè)計(jì)贷帮、產(chǎn)出頁(yè)面
不需要依賴后端方案的RWD：
網(wǎng)頁(yè)版戚揭、手機(jī)版、等等一起服務(wù)撵枢、設(shè)計(jì)民晒、產(chǎn)出頁(yè)面
基于HTML5和CSS3就可以制作不需要后端方案的RWD
——內(nèi)容摘自課件
什么是響應(yīng)式web設(shè)計(jì)
“響應(yīng)式web設(shè)計(jì)”這個(gè)名字是Ethan Marcotte在2010年發(fā)明的。當(dāng)時(shí)他在A List Apart上寫了一篇文章（http://www.alistapart.com/articles/responsive-web-design/）锄禽，這篇文章綜合運(yùn)用了三種已有技術(shù)（彈性網(wǎng)絡(luò)布局潜必、彈性圖片/媒體、媒體查詢）實(shí)現(xiàn)了一個(gè)解決方案沃但，就叫“響應(yīng)式web設(shè)計(jì)”磁滚。——摘抄自《響應(yīng)式web設(shè)計(jì)基礎(chǔ)》
“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design，通炒谷粒縮寫為 RWD）维雇，又稱為自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)、回應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)晒他。是一種現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)方法吱型，該設(shè)計(jì)基于 CSS3 的媒介查詢（Media Query）特性使得網(wǎng)頁(yè)適應(yīng)不同設(shè)備，即根據(jù)設(shè)備的分辨率和縮放自動(dòng)重新布局仪芒，同時(shí)減少縮放唁影、平移和滾動(dòng)〉嗝”——內(nèi)容摘自網(wǎng)站segmentfault中用戶“Bizhong”發(fā)表的《淺析RWD》一文
