名詞解釋
1.響應式web設(shè)計(Responsive Web Design)：
響應式網(wǎng)站設(shè)計是一種網(wǎng)絡(luò)頁面設(shè)計布局掂铐，其理念是：網(wǎng)絡(luò)內(nèi)容中集中創(chuàng)建頁面的圖片排版大小族淮，可以智能地根據(jù)訪問它的視口（vieewpoet）以及使用的設(shè)備環(huán)境(device enviorment)進行相對應的布局。
2.HTML
超文本標記語言，標準通用標記語言下的一個應用宋列。
超文本就是指頁面內(nèi)可以包含圖片填帽、甚至音樂孵稽、程序等非文字元素政模。
超文本標記語言的結(jié)構(gòu)包括“頭”部分（英語：Head）、和“主體”部分（英語：Body）满俗，其中“頭”部提供關(guān)于網(wǎng)頁的信息转捕，“主體”部分提供網(wǎng)頁的具體內(nèi)容。
3.CSS（層疊樣式表）
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML標準通用標記語言的一個應）或XML標準通用標記語言的一個子集等文件樣式的計算機語言漫雷。CSS不僅可以靜態(tài)地修飾網(wǎng)頁瓜富，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制降盹，支持幾乎所有的字體字號樣式与柑，擁有對網(wǎng)頁對象和模型樣式編輯的能力谤辜。
4.DOM(文檔折疊)
文檔對象模型（Document Object Model，簡稱DOM）价捧，是W3C組織推薦的處理可擴展標志語言的標準編程接口丑念。在網(wǎng)頁上，組織頁面（或文檔）的對象被組織在一個樹形結(jié)構(gòu)中结蟋，用來表示文檔中對象的標準模型就稱為DOM脯倚。
5.前端
前端對于網(wǎng)站來說，通常是指嵌屎，網(wǎng)站的前臺部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層推正。因此前端技術(shù)一般分為前端設(shè)計和前端開發(fā)，前端設(shè)計一般可以理解為網(wǎng)站的視覺設(shè)計宝惰，前端開發(fā)則是網(wǎng)站的前臺代碼實現(xiàn)植榕，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級版本HTML5尼夺、CSS3尊残，以及SVG等。
6.后端
后端更多的是與數(shù)據(jù)庫進行交互以處理相應的業(yè)務(wù)邏輯淤堵。需要考慮的是如何實現(xiàn)功能寝衫、數(shù)據(jù)的存取、平臺的穩(wěn)定性與性能等拐邪。
基于HTML5和CSS3就可以制作不需要后端方案的RWD
為何需要響應式web設(shè)計慰毅？
不同設(shè)備有不同的屏幕分辨率
![]()
StatCounter-resolution-ww-monthly-201702-201802.png
圖片數(shù)據(jù)來自(互聯(lián)網(wǎng)與新媒體)市場調(diào)查機構(gòu) statcounter.
如今電子產(chǎn)品更新周期短，各類產(chǎn)品設(shè)備屢見不鮮庙睡。如圖片所示事富，市場上各種屏幕分辨率都在被使用，其中不具名的其他類分辨率占比最重乘陪，因此统台，為了使各類用戶都有更好的上網(wǎng)體驗，響應式Web設(shè)計很有被執(zhí)行的需要啡邑，來滿足各類用戶使用不同的視口和設(shè)備達到更好的體驗贱勃。
2.web設(shè)計更好的適配于電腦、手機谤逼、平板
· 2016年
2017年
2016年底贵扰，手機的使用在全球市場份額超越電腦桌面,全球手機瀏覽器超越pc瀏覽器，響應式web設(shè)計讓web作品適配手機流部、平板和桌面電腦戚绕，適應用戶的屏幕大小，為今天和明天的設(shè)備都提供最佳用戶體驗枝冀。
響應式網(wǎng)站與傳統(tǒng)網(wǎng)站的對比
1.傳統(tǒng)網(wǎng)站：中山大學南方學院文學與傳媒系
http://wcx.nfu.edu.cn/
電腦桌面版
對比
2.響應式網(wǎng)站：中山大學文學與傳媒學院
屏幕較窄時顯示網(wǎng)站導航
![]()
wcy.1.png
當把屏幕寬拉至768左右Responsive web顯示出首頁
響應式網(wǎng)站設(shè)計的關(guān)鍵技術(shù)
1.彈性網(wǎng)格布局(fluid grid)
在pc端實現(xiàn)的頁面基礎(chǔ)上舞丛，將一些元素的寬高由原來的固定多少像素(px)耘子、調(diào)整為百分比(%)、字體比例(em)或布局方面的margin球切、padding谷誓、left、top等以px為單位的值吨凑，這也是當前實現(xiàn)響應式布局的兩種主要實現(xiàn)方法捍歪。
2.流體圖片(liquid image)
對圖片處理，如果要使圖片能根據(jù)分辨率來適應鸵钝，而且還不失真糙臼，其實不用考慮的那么復雜，我們要做的只是讓圖片能根據(jù)不同分辨率自適應罷了恩商，不管圖片會不會因為被拉伸而失真弓摘，因為真的遇到這樣的情況，我們可以考慮在不同分辨率下使用不同的圖片痕届，這樣就簡單多了。所以讓圖片尺寸自適應末患，我們只要不給圖片設(shè)定具體的寬高尺寸研叫，只要在樣式中給該圖片一個width：100%，這樣圖片就能根據(jù)它父容器的尺寸自動調(diào)整了璧针。
3.媒體查詢(media query)
這個也是響應式頁面的一個關(guān)鍵技術(shù)嚷炉，根據(jù)不同的分辨率去調(diào)整一些不同的樣式。
@media screen and (max-device-width: 480px) {
.column {
float:none;
}
}
通過上面的這樣媒體查詢結(jié)構(gòu)探橱，我們可以設(shè)定在不同分辨率下選用不同的樣式來調(diào)整響應式頁面申屹。像前面第二點流體布局上，我們使用百分比或字號比例去實現(xiàn)流體布局的時候隧膏，第一種方法是可以不用媒體查詢
直接實現(xiàn)流體布局的哗讥，就是元素的寬高能自適應不同分辨率屏幕。
響應式Web設(shè)計”這個名字是Ethan Marcotte在2010年發(fā)明的胞枕。當時杆煞，他在A List Apart上寫了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），這篇文章綜合運用了三種已有技術(shù)（彈性網(wǎng)格布局腐泻、彈性圖片/媒體决乎、媒體查詢）實現(xiàn)了一個解決方案，就叫“響應式Web設(shè)計”派桩。
文獻資料來自《Responsive Web Design with HTML5 and CSS3》
