什么是“響應式網(wǎng)頁設計”
“響應式網(wǎng)頁設計”這個名字是Ethan Marcotte在2010年發(fā)明的。當時瓶殃，他在A List Apart上寫了一篇文章，這篇文章綜合運用了三種已有的技術（彈性網(wǎng)絡布局、彈性圖片/媒體退客、媒體查詢）實現(xiàn)了一個解決方案，就叫“響應式web設計”
名詞解釋
| 中文 | 英文 | 術語解釋 |
|---|---|---|
| 響應式網(wǎng)頁設計 | Responsive Web design（RWD） | 網(wǎng)頁內(nèi)容會隨著訪問它的視口及設備的不同而呈現(xiàn)不同的樣式 |
| 超文本標記語言 | HyperText Markup Language（HTML） | 是一種詳細規(guī)定了瀏覽器和萬維網(wǎng)服務器之間互相通信的規(guī)則 |
| 層疊樣式表 | Cascading Style Sheets（CSS） | 是一種用來表現(xiàn)HTML的一個應用或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言链嘀。CSS不僅可以靜態(tài)地修飾網(wǎng)頁萌狂，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。 |
| 互聯(lián)網(wǎng)總稱 | World Wide Web (Web) | 是一種基于超文本和HTTP的怀泊、全球性的茫藏、動態(tài)交互的、跨平臺的分布式圖形信息系統(tǒng) |
| 域名解析系統(tǒng) | Domain Name System（DNS） | 是因特網(wǎng)的一項核心服務霹琼，它作為可以將域名和IP地址相互映射的一個分布式數(shù)據(jù)庫务傲，能夠使人更方便的訪問互聯(lián)網(wǎng)凉当，而不用去記住能夠被機器直接讀取的IP數(shù)串。 |
| 彈性/流性網(wǎng)絡布局 | fluid grid | 頁面布局結構基于表格售葡，以往的網(wǎng)頁布局是以像素（px）為單位看杭，來固定網(wǎng)頁各元素的尺寸（導致某些網(wǎng)頁需要拖拉滾動才能完整瀏覽）。在響應式網(wǎng)頁設計中挟伙，則以百分比為單位楼雹，可以讓網(wǎng)頁根據(jù)視口大小在任何媒體查詢之間靈活伸縮修正樣式（也可以說是使用媒體查詢來限制元素變動范圍）。以此實現(xiàn)固定尺度轉(zhuǎn)換為相對尺度尖阔。 |
| 視口 | viewport | 視口和設備的屏幕尺寸不是同一個概念贮缅。視口是指瀏覽器窗口內(nèi)的內(nèi)容區(qū)域，不包含工具欄介却，標簽欄等谴供，也就是網(wǎng)頁實際顯示的區(qū)域。 |
| 彈性圖片/媒體 | flxible images | 指的是不給圖片設置固定尺寸齿坷，而是根據(jù)流體網(wǎng)格進行縮放憔鬼，用于適應各種網(wǎng)格的尺寸。 |
| 媒體查詢 | media queries | 媒體查詢可以讓我們根據(jù)設備顯示器的特性（如視口寬度胃夏、屏幕比例轴或、設備方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成仰禀。媒體查詢中可用于檢測的媒體特性有 width 照雁、 height 和 color （等）。使用媒體查詢答恶，可以在不改變頁面內(nèi)容的情況下饺蚊，為特定的一些輸出設備定制顯示效果。 |
| Web前端 | 在Web應用中用戶可以看得見的東西悬嗓。包括Web頁面的結構污呼、Web的外觀視覺表現(xiàn)以及Web層面的交互實現(xiàn)。 | |
| Web 后端 | 后端是與數(shù)據(jù)庫進行交互以及處理相應的業(yè)務邏輯包竹。需要考慮的是如何實現(xiàn)功能燕酷、數(shù)據(jù)的存取、平臺的穩(wěn)定性與性能等周瞎。 |
為何需要“響應式網(wǎng)頁設計”苗缩？
現(xiàn)如今，電子產(chǎn)品層出不窮声诸，據(jù)上圖酱讶，市場上各類屏幕分辨率都有用戶使用。所以為了不同的用戶都可以更好的使用彼乌，響應式網(wǎng)頁設計很有必要出現(xiàn)以及發(fā)展泻肯。
根據(jù)市場調(diào)查機構stat counter網(wǎng)站渊迁，以中國與全球的桌面、移動和平板電腦市場份額為例
如上圖所示灶挟，不論是中國還是全球宫纬，移動手機的使用都大于桌面。響應式網(wǎng)絡設計的出現(xiàn)可以給用戶更好的體驗膏萧。
為了讓讀者更好地了解響應式與非響應式網(wǎng)頁地區(qū)別漓骚，我將會以圖片地形式來表示。
1榛泛、非響應式網(wǎng)頁（以鳳凰網(wǎng)為例)
如圖蝌蹂，在電腦上地顯示是如此，在iPhone6plus上地顯示也依舊如此曹锨。對于用戶地使用不是很方便孤个。
2、響應式網(wǎng)頁（以樂視電視官網(wǎng)為例）
如下圖沛简，是否相比與非響應式網(wǎng)頁更為方便呢?
響應式網(wǎng)頁設計的關鍵技術
- 一切彈性化：
我們通過響應式的設計和開發(fā)思路讓頁面更加"彈性"了齐鲤。圖片的尺寸可以被自動調(diào)整，頁面液態(tài)圖片技術布局再不會被破壞椒楣。雖然永遠沒有最完美的解決方案给郊，但它給了我們更多選擇。無論用戶切換設備的屏幕定向方式捧灰，還是從臺式機屏幕轉(zhuǎn)到iPad上瀏覽淆九，頁面都會真正的富有彈性。
通過液態(tài)網(wǎng)格和液態(tài)圖片技術毛俏，并且在正確的地方使用了正確的HTML標記炭庙。
- 響應式圖片：
響應式圖片技術思想：不僅要同比的縮放圖片，還要在小設備上降低圖片自身的分辨率煌寇。這個技術的實現(xiàn)需要使用幾個相關文件焕蹄，我們可以在Github上獲取。包括一個JavaScript文件(rwd-images.js)阀溶，一個.htaccess文件腻脏，以及一些范例資源文件。大致的原理是淌哟，rwd-images.js會檢測當前設備的屏幕分辨率迹卢，如果是大屏幕設備辽故，則向頁面head部分中添加BASE標記徒仓，并將后續(xù)的圖片、腳本和樣式表加載請求定向到一個虛擬路徑"/rwd-router"誊垢。當這些請求到達服務器端掉弛，.htacces文件會決定這些請求所需要的是原始圖片還是小尺寸的"響應式圖片"症见，并進行相應的反饋輸出。對于小屏幕的移動設備殃饿，原始尺寸的大圖片永遠不會被用到谋作。
- 媒介查詢：
媒體查詢可以讓我們根據(jù)設備顯示器的特性（如視口寬度、屏幕比例乎芳、設備方向：橫向或縱向）為其設定CSS樣式遵蚜，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特性有 width 奈惑、 height 和 color （等）吭净。使用媒體查詢，可以在不改變頁面內(nèi)容的情況下肴甸，為特定的一些輸出設備定制顯示效果寂殉。
響應式網(wǎng)頁設計與前后端的關系
web前端即在Web應用中用戶可以看得見的東西。包括Web頁面的結構原在、Web的外觀視覺表現(xiàn)以及Web層面的交互實現(xiàn)友扰。而后端是與數(shù)據(jù)庫進行交互以及處理相應的業(yè)務邏輯。需要考慮的是如何實現(xiàn)功能庶柿、數(shù)據(jù)的存取村怪、平臺的穩(wěn)定性與性能等。因此浮庐，web的正常運轉(zhuǎn)需要前端與后端的相互交互來實現(xiàn)实愚。
