名詞解釋

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ù)學(xué)運算的工具

view point（視口）：瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域

max-width：保證所有圖片最大顯示為其自身的100%

DOM(文檔折疊)：是W3C組織推薦的處理可擴展標志語言的標準編程接口。在網(wǎng)頁上，組織頁面（或文檔）的對象被組織在一個樹形結(jié)構(gòu)中，用來表示文檔中對象的標準模型就稱為DOM

斷點：某個寬度臨界點，跨過這個點布局就會發(fā)生顯著變

為何需要響應(yīng)式網(wǎng)頁設(shè)計

2016年中國屏幕分辨率趨勢圖

近期移動客戶端瀏覽網(wǎng)頁趨勢圖

2016年不同客戶端使用趨勢圖

根據(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)系

不需要依賴后端方案的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ǔ)》