名詞解釋
Internet:就是通常所說的互聯(lián)網(wǎng)，是由一些使用公用語言相互通信的計算機連接而成的網(wǎng)絡(luò)
WWW（World Wide Web）：譯為“萬維網(wǎng)”嘶居，是Internet提供的一種網(wǎng)頁瀏覽服務(wù)
URL（Uniform Resource Locator）：譯為“統(tǒng)一資源定位符”但狭，實質(zhì)上就是Web地址旬渠，俗稱“網(wǎng)址”
DNS（英文Domain Name System）：譯為“域名解析系統(tǒng)”
HTTP（Hypertext Transfer Protocol）：，譯為“超文本傳輸協(xié)議”评抚，是種詳細規(guī)定了瀏覽器和萬維網(wǎng)服務(wù)器之間相互通信的規(guī)則
HTML（HyperText Markup Language）：超文本標記語言豹缀，頁面內(nèi)可以包含圖片、音樂慨代、程序等非文字元素邢笙。
其中HTML5是萬維網(wǎng)的核心語言、標準通用標記語言下的一個應(yīng)用超文本標記語言HTML的第五次重大修改侍匙。相當于是HTML其中的一個版本
XHTML（Extensible Hyper Text Markup Language）：XHTML 指擴展超文本標簽語言氮惯；
XHTML 的目標是實現(xiàn)HTML向XML的過渡；
XHTML 與 HTML 4.01 幾乎是相同的想暗；
XHTML 是更嚴格更純凈的 HTML 版本妇汗；
XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML
Web:指互聯(lián)網(wǎng)的使用環(huán)境，但對于網(wǎng)站制作者來說说莫，它是一系列技術(shù)的總稱杨箭，稱之為網(wǎng)頁
Web標準由W3C和其他標準化組織制定的一系列標準的集合，包含HTML储狭、CSS互婿、JavaScript等等
W3C:W3C（英文World Wide Web Consortium的縮寫）捣郊，譯為“萬維網(wǎng)聯(lián)盟”，是國際著名的標準化組織
JavaScript：Web頁面中的一種直譯式腳本語言慈参，是一種動態(tài)類型呛牲、弱類型、基于原型的語言驮配，內(nèi)置支持類型娘扩。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分壮锻，廣泛用于客戶端的腳本語言琐旁，最早是在HTML（標準通用標記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能躯保。通過JavaScript可以將靜態(tài)頁面轉(zhuǎn)變成支持用戶交互并響應(yīng)相應(yīng)時間的動態(tài)頁面旋膳。在網(wǎng)站建設(shè)中，JavaScript用于將靜態(tài)頁面轉(zhuǎn)化為動態(tài)頁面途事，為頁面添加動態(tài)效果
響應(yīng)式Web設(shè)計（Responsive Web Design=RWD）：由Ethan Marcotte提出。網(wǎng)頁內(nèi)容會隨著訪問它的視口及設(shè)備的不同而呈現(xiàn)不同的樣式擅羞，使Web作品適配手機尸变，平板，桌面電腦减俏，讓一個網(wǎng)站同時適配多種設(shè)備和多個屏幕召烂，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小，輸入方式娃承，設(shè)備奏夫，瀏覽器功能）而變化，方便用戶閱讀和導(dǎo)航瀏覽历筝，減少用戶的放大/縮小/滑動操作酗昼，從而提供完整而友好的用戶體驗。
先針對小屏幕設(shè)計梳猪，再逐步擴展到針對大屏幕的設(shè)計麻削。
基于HTML5和CSS3的的響應(yīng)式web設(shè)計，并不依賴服務(wù)端或后端方案
CSS3（Cascading Style Sheets Level 3）：CSS3是CSS（層疊樣式表）技術(shù)的升級版本春弥，通常稱為CSS樣式或樣式表呛哟，主要包括盒子模型、列表模塊匿沛、超鏈接方式扫责、語言模塊、背景和邊框逃呼、文字特效鳖孤、多欄布局等模塊借帘，主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體，大小淌铐，對齊方式等）肺然，圖片的外形（寬高，邊框樣式腿准，邊距等）以及版面布局等外觀顯示樣式
CSS3媒體查詢：可以讓我們針對特定的設(shè)備能力或條件為網(wǎng)頁應(yīng)用特定的CSS樣式
CSS預(yù)處理器（Sass际起、 LESS、 Stylus吐葱、 PostCSS）：可以幫我們組織代碼街望、變量、顏色操作和數(shù)學運算的工具
view point（視口）：瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域
max-width：保證所有圖片最大顯示為其自身的100%
DOM(文檔折疊)：是W3C組織推薦的處理可擴展標志語言的標準編程接口弟跑。在網(wǎng)頁上灾前，組織頁面（或文檔）的對象被組織在一個樹形結(jié)構(gòu)中，用來表示文檔中對象的標準模型就稱為DOM
斷點：某個寬度臨界點孟辑，跨過這個點布局就會發(fā)生顯著變
為何需要響應(yīng)式網(wǎng)頁設(shè)計
根據(jù)市場調(diào)查機構(gòu)statcounter 2016年的中國的手機市場與臺式電腦市場與平板市場對比哎甲，發(fā)現(xiàn)在16年三月中旬臺式電腦的市場占有率和手機市場占有率有了交叉點，之后手機市場占有率逐漸上升饲嗽，而臺式電腦占有率逐漸下降炭玫，說明現(xiàn)在的中國手機使用者遠遠比臺式電腦使用者多。
不僅僅在中國貌虾，世界范圍內(nèi)三個市場占有率的比較也在說明手機用戶在全球的數(shù)量已經(jīng)在2016年十月中旬就已經(jīng)超過了電腦用戶吞加。
由于手機用戶數(shù)量的上升，加上智能手機時代的來臨尽狠，手機已經(jīng)不僅僅具有打電話發(fā)短信這些功能了衔憨，能上網(wǎng)進行瀏覽是現(xiàn)代智能手機的基本功能。為此網(wǎng)頁的設(shè)計者就不僅僅要考慮網(wǎng)頁在電腦上的顯示效果了袄膏，也要考慮隨著互聯(lián)網(wǎng)時代的到來践图，許許多多不同產(chǎn)品的屏幕大小，網(wǎng)頁美觀哩陕，網(wǎng)頁布局等因素平项，所以響應(yīng)式網(wǎng)頁設(shè)計也應(yīng)運而生。
幾年前悍及，我們看到的網(wǎng)站還都是固定寬度的闽瓢，目標是讓所有用戶都擁有相同的體驗。這種固定寬度（通常為960像素左右）對筆記本電腦來說也不算寬心赶，擁有更大顯示器的用戶則會在兩側(cè)看到很大的白邊扣讼。響應(yīng)式Web設(shè)計可以讓一個網(wǎng)站同時適配多種設(shè)備和多個屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小缨叫、輸入方式椭符、設(shè)備/瀏覽器能力）而變化荔燎。
由于目前移動設(shè)備的大量使用，以及PC顯示器的尺寸逐漸出現(xiàn)較大差別销钝，傳統(tǒng)的web頁面已經(jīng)不能滿足多種設(shè)備的瀏覽效果有咨。2016年10月，移動設(shè)備占全球市場份額已超越pc顯示器蒸健。
例子
使用Web的網(wǎng)頁：淘寶網(wǎng)
無使用Web的網(wǎng)頁：天貓網(wǎng)
關(guān)于RWD的三項組成科技
- 彈性網(wǎng)格布局（fluid grid）：圖片的尺寸可以被自動調(diào)整座享，頁面布局再不會被破壞。無論用戶切換設(shè)備的屏幕定向方式似忧，還是從臺式機屏幕轉(zhuǎn)到iPad上瀏覽渣叛，頁面都會真正的富有彈性。
- 彈性圖片（flexible image）： 不僅能同比的縮放圖片盯捌，還要在小設(shè)備上降低圖片自身的分辨率淳衙。其原理為rwd-images.js會檢測當前設(shè)備的屏幕分辨率，如果是大屏幕設(shè)備饺著，則向頁面head部分中添加BASE標記箫攀，并將后續(xù)的圖片、腳本和樣式表加載請求定向到一個虛擬路徑"/rwd-router"瓶籽。當這些請求到達服務(wù)器端匠童，.htacces文件會決定這些請求所需要的是原始圖片還是小尺寸的"響應(yīng)式圖片"，并進行相應(yīng)的反饋輸出塑顺。對于小屏幕的移動設(shè)備，原始尺寸的大圖片永遠不會被用到俏险。
- 媒體查詢（media queries）：媒體查詢是界面為了適應(yīng)不同屏幕大小而存在的严拒。媒體查詢 是評估 True 或 False 的一種表達。如果為 True竖独，則繼續(xù)使用樣式表裤唠。如果為 False，則不能使用樣式表莹痢。這種簡單邏輯能夠更靈活地對特定的設(shè)計場景使用自定義的顯示規(guī)則种蘸。媒體查詢包含一個媒體類型，后跟一個或多個檢查特定條件（如最小的屏幕寬度）的表達式竞膳。
響應(yīng)式網(wǎng)頁設(shè)計的前后端關(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：網(wǎng)頁版锉走、手機版滨彻、等等分開服務(wù)藕届、設(shè)計、產(chǎn)出頁面
不需要依賴后端方案的RWD：網(wǎng)頁版亭饵、手機版休偶、等等一起服務(wù)、設(shè)計辜羊、產(chǎn)出頁面
基于HTML5和CSS3就可以制作不需要后端方案的RWD
RWD的提出
“RWD”這個名字是Ethan Marcotte在2010年發(fā)明的踏兜。當時他在A List Apart上寫了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），這篇文章綜合運用了三種已有技術(shù)（彈性網(wǎng)絡(luò)布局只冻、彈性圖片/媒體庇麦、媒體查詢）實現(xiàn)了一個解決方案，就叫“響應(yīng)式web設(shè)計”喜德∩介希——摘抄自《響應(yīng)式web設(shè)計基礎(chǔ)》
