一、名詞解釋

名詞引用自教科書——《響應(yīng)式Web設(shè)計——HTML5和CSS3實戰(zhàn)(第二版)》

響應(yīng)式Web設(shè)計（Responsive Web Design）
響應(yīng)式網(wǎng)站設(shè)計是一種基于HTML5和CSS3的網(wǎng)絡(luò)頁面設(shè)計布局，隨著視口(viewport)及設(shè)備(device)的不同呈現(xiàn)不同的樣式(style)。其理念是：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進行相對應(yīng)的布局,也就是使用彈性網(wǎng)格布局(fluid grid)丶彈性圖片／媒體(flexible images)丶媒體查詢(media queries)等技術(shù)實現(xiàn)讓一個網(wǎng)站同時適配多種設(shè)備和多個屏幕，讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。

視口(viewport)
瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域，視口通常并不等于屏幕大小，特別是可以
縮放瀏覽器窗口的情況下。

彈性網(wǎng)格布局(fluid grid)
網(wǎng)格布局支持彈性尺寸（flex-size），這是一個很好的自適應(yīng)布局技術(shù)。彈性尺寸使用fr尺寸單位，其來自 "fraction" 或 "fractional unit" 單詞的前兩個字母，表示整體空間的一部分。

彈性圖片／媒體(flexible images)
不給圖片設(shè)置固定尺寸，而是根據(jù)流體網(wǎng)格進行縮放，用于適應(yīng)各種網(wǎng)格的尺寸。

媒體查詢(media queries)
是界面為了適應(yīng)不同屏幕大小而存在的。使用CSS3的媒體查詢根據(jù)屏幕寬度來調(diào)整布局，可以讓我們在某些條件下（如寬度和高度為多少的情況下）為網(wǎng)頁應(yīng)用樣式。

SVG（Scalable Vector Graphics，可伸縮矢量圖）
可縮放矢量圖形是基于可擴展標(biāo)記語言（[標(biāo)準(zhǔn)通用標(biāo)記語言]的子集），用于描述二維矢量圖形的一種圖形格式。它由萬維網(wǎng)聯(lián)盟制定，是一個開放標(biāo)準(zhǔn)。

前端（front-end）
前端對于網(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等。

后端（back-end）
后端更多的是與數(shù)據(jù)庫進行交互以處理相應(yīng)的業(yè)務(wù)邏輯，需要考慮的是如何實現(xiàn)功能、數(shù)據(jù)的存取、平臺的穩(wěn)定性與性能

HTML
超文本標(biāo)記語言，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用，就是指頁面內(nèi)可以包含圖片甚至音樂等非文字元素。超文本標(biāo)記語言的結(jié)構(gòu)包括頭部分（Head）、和主體部分（Body），其中頭部提供關(guān)于網(wǎng)頁的信息，主體部分提供網(wǎng)頁的具體內(nèi)容。

CSS
層疊樣式表(Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。

HTML5
萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言（HTML的第五次重大修改）

CSS3
CSS3是CSS（層疊樣式表）技術(shù)的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
CSS演進的一個主要變化就是W3C決定將CSS3分成一系列模塊。瀏覽器廠商按CSS節(jié)奏快速創(chuàng)新，因此通過采用模塊方法，CSS3規(guī)范里的元素能以不同速度向前發(fā)展，因為不同的瀏覽器廠商只支持給定特性。但不同瀏覽器在不同時問支持不同特性，這也讓跨瀏覽器開發(fā)變得復(fù)雜。

javascript
JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。

Chrome 開發(fā)者工具
這是一套內(nèi)置于Google Chrome中的Web開發(fā)和調(diào)試工具，可用來對網(wǎng)站進行迭代丶調(diào)試和分析

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

最小寬度媒體查詢
只在視口符合最小定義寬度條件時才會應(yīng)用到網(wǎng)頁，實際的最小寬度可以使用不同的長度單位指定，比如百分比、em、rem和px，例如：
@media screen and (min-width: 50em) {
/ 樣式 /
}
@media指令告訴瀏覽器這里是一個媒體查詢，screen告訴瀏覽器這里的規(guī)則只適用于屏幕類型，而and (min-width:50em)的意思是其中的規(guī)則只適用于視口寬度在50em以上的情況。

文本編輯器
文本編輯器是用作編寫普通文字的應(yīng)用軟件，常用來編寫程序的源代碼

URL
統(tǒng)一資源定位符是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址?；ヂ?lián)網(wǎng)上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。

DNS
域名系統(tǒng)，萬維網(wǎng)上作為域名和IP地址相互映射的一個分布式數(shù)據(jù)庫，能夠使用戶更方便的訪問互聯(lián)網(wǎng)，而不用去記住能夠被機器直接讀取的IP數(shù)串。通過域名，最終得到該域名對應(yīng)的IP地址的過程叫做域名解析（或主機名解析）

HTTP
超文本傳輸協(xié)議是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議。所有的WWW文件都必須遵守這個標(biāo)準(zhǔn)。

Web標(biāo)準(zhǔn)
WEB標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如W3C DOM）、ECMAScript等。

RWD滿足以下需求
1.面對不斷擴展的瀏覽器和設(shè)備應(yīng)對方案
2.可以讓一個網(wǎng)站同時適配多種設(shè)備和多個屏幕
3.可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小丶輸入方式丶設(shè)備/瀏覽器能力）而變化。
4.基于HTML5和CSS3的RWD不需要依賴后端方案。

<meta>標(biāo)簽
按照設(shè)備的寬度（device-width）來渲染網(wǎng)頁內(nèi)容

<max-width>標(biāo)簽
就是要保證所有圖片最大顯示為其自身的100%（即最大只可以顯示為自身那么大）

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

圖片來自(互聯(lián)網(wǎng)與新媒體)市場調(diào)查機構(gòu) statcounter 的數(shù)據(jù)所制的圖和表
簡書

1.中國的智能手機用戶的數(shù)量在2016年已經(jīng)超過PC端的用戶數(shù)量,而世界的智能手機用戶的數(shù)量也是在2016年已經(jīng)超過PC端的用戶數(shù)量，這表明更多的流量會從移動端流向網(wǎng)頁，大大加大了人們在外出行使用網(wǎng)絡(luò)的頻率，并且手機端瀏覽網(wǎng)頁更加方便，這就要為用戶設(shè)置能夠在移動端瀏覽的響應(yīng)式頁面

1.png

2.png

2.增強用戶體驗,實現(xiàn)頁面的可擴展性，響應(yīng)式頁面提供了將來可以支持任何新屏幕或設(shè)備的最佳機會。中國和世界的屏幕分辨率越來越多樣化，而不只是單一的以蘋果公司為主導(dǎo)的屏幕分辨率，這就要求在設(shè)計網(wǎng)頁時要充分考慮頁面的斷點與銜接，使頁面能夠適應(yīng)不同手機分辨率的大小和橫豎屏

3.png

4.png

因為隨著智能移動設(shè)備不斷地加入到互聯(lián)網(wǎng)中來，使得互聯(lián)網(wǎng)上的訪問設(shè)備和屏幕的分辨率是爆炸性的增長。

所以為了給移動端提供更好的體驗，必須在網(wǎng)站設(shè)計中使用響應(yīng)式網(wǎng)站設(shè)計，并且整合從PC端到手機的各種屏幕尺寸和分辨率，用技術(shù)來使網(wǎng)頁適應(yīng)不同分辨率的屏幕。

三、區(qū)別是否使用響應(yīng)式Web設(shè)計的網(wǎng)站

例子網(wǎng)站的可點連結(jié)（必要）及圖表（可選）

1.已使用響應(yīng)式Web設(shè)計——華為手機官網(wǎng)、Vivo手機官網(wǎng)
簡書

微信圖片_20180311155806.png

簡書

微信圖片_20180311160032.png

2.未使用響應(yīng)式Web設(shè)計——一站到底官方網(wǎng)站、最強大腦官網(wǎng)
簡書

微信圖片_20180311155158.png

簡書

微信圖片_20180311155406.png

四、RWD(響應(yīng)式網(wǎng)頁設(shè)計)的三項組成科技

伊?！ゑR科特（Ethan Marcotte）在2010年首先提出了響應(yīng)式網(wǎng)頁設(shè)計（RWD,Responsive Web Design）這個術(shù)語。在他的一篇文章《[Responsive Web Design · An A List Apart Article》簡書 中他將已有的三種發(fā)開技巧（彈性圖片，彈性網(wǎng)格布局，媒體與媒體查詢） 進行了整合，命名為響應(yīng)式網(wǎng)頁設(shè)計。
作者：Jony 簡書

流動網(wǎng)格(彈性網(wǎng)格布局)
設(shè)計不會對瀏覽器窗口的寬度做出任何假設(shè)，并且可以很好地適應(yīng)具有縱向和橫向模式的設(shè)備。

靈活圖像(彈性圖片)
不僅要同比的縮放圖片，還要在小設(shè)備上降低圖片自身的分辨率

媒體查詢(媒體與媒體查詢)
是界面為了適應(yīng)不同屏幕大小而存在的。使用CSS3的媒體查詢根據(jù)屏幕寬度來調(diào)整布局，可以讓我們在某些條件下（如寬度和高度為多少的情況下）為網(wǎng)頁應(yīng)用樣式

五、RWD和前後端的關(guān)系

前端對于網(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等。

微信圖片_20180311164432.png

timg (1).jpg

timg.jpg

后端更多的是與數(shù)據(jù)庫進行交互以處理相應(yīng)的業(yè)務(wù)邏輯，需要考慮的是如何實現(xiàn)功能、數(shù)據(jù)的存取、平臺的穩(wěn)定性與性能

微信圖片_20180311164445.png

u=1294177219,3961223716&fm=27&gp=0.jpg

u=3582960560,1019263646&fm=27&gp=0.jpg

RWD與前后端有多種形式：
有需要依賴后端方案的RWD——網(wǎng)頁版、手機版、等等分開服務(wù)、設(shè)計、產(chǎn)出頁面
有不需要依賴后端方案的RWD——網(wǎng)頁版、手機版、等等一起服務(wù)、設(shè)計、產(chǎn)出頁面
還有基于HTML5和CSS3就可以制作不需要后端方案的RWD

一個成型的網(wǎng)站是需要前端和后端的不斷交互調(diào)整和檢查來維護的，前端和后端必須互相搭配和互補，不能夠是只有前端或者只有后端，假使只是運行其一，是沒有辦法搭建網(wǎng)站的。而且響應(yīng)式網(wǎng)頁設(shè)計的引進，大大提高了網(wǎng)頁在移動端的可視性和拓展性，使在互聯(lián)網(wǎng)上的訪問設(shè)備和屏幕分辨率得到很好的改善

六、摘抄伊?！ゑR科特的一段話作為結(jié)語

前進的道路
流動網(wǎng)格，靈活圖像和媒體查詢是響應(yīng)式網(wǎng)頁設(shè)計的三大技術(shù)要素，但它也需要不同的思考方式。我們可以使用媒體查詢逐步改進我們在不同查看環(huán)境下的工作，而不是將我們的內(nèi)容隔離到不同的設(shè)備特定體驗中。這并不是說沒有針對具體設(shè)備的單獨網(wǎng)站的商業(yè)案例; 例如，如果您的移動網(wǎng)站的用戶目標(biāo)范圍比其桌面設(shè)備的范圍更有限，那么為不同的內(nèi)容提供服務(wù)可能是最好的方法。
但是那種設(shè)計思維并不需要成為我們的默認設(shè)計?，F(xiàn)在比以往任何時候，我們都在設(shè)計意在通過不同體驗梯度來觀看的作品。響應(yīng)式網(wǎng)頁設(shè)計為我們提供了一條前進的道路，最終讓我們能夠“為潮起潮落而設(shè)計”。
簡書