響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)是一種網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)布局，其理念是：集中創(chuàng)建頁(yè)面的圖片排版大小，可以智能地根據(jù)用戶(hù)行為以及使用的設(shè)備環(huán)境進(jìn)行相對(duì)應(yīng)的布局。
響應(yīng)式布局是Ethan Marcotte 在2010年5月份提出的一個(gè)概念，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。(文章網(wǎng)址：http://alistapart.com/article/responsive-web-design)
頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶(hù)行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無(wú)論用戶(hù)正在使用筆記本還是iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說(shuō)，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶(hù)的設(shè)備環(huán)境。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這樣，我們就可以不必為不斷到來(lái)的新設(shè)備做專(zhuān)門(mén)的版本設(shè)計(jì)和開(kāi)發(fā)了。
為何需要"響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)"?
Windows 10已經(jīng)在幾個(gè)月前超過(guò)了Windows 7，成為世界上排名第一的臺(tái)式機(jī)操作系統(tǒng)，現(xiàn)在下一個(gè)里程碑是達(dá)到50%的市場(chǎng)份額。根據(jù)StatCounter的數(shù)據(jù)，這不應(yīng)該花太長(zhǎng)的時(shí)間，因?yàn)閃indows 10市場(chǎng)份額在2月份穩(wěn)定增長(zhǎng)，這很可能是由于微軟完成了秋季創(chuàng)作者更新的推出。目前，Windows 10在全球的43.54%的個(gè)人電腦上運(yùn)行，而Windows 7則是41.55%，其他Windows版本遠(yuǎn)遠(yuǎn)落后，例如，Windows 8.1僅占全球PC的8.53%。
而造成這個(gè)變化趨勢(shì)的主要原因是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，如今，越來(lái)越多的用戶(hù)使用智能手機(jī)和平板電腦上網(wǎng)，響應(yīng)式設(shè)計(jì)網(wǎng)站似乎是最簡(jiǎn)單也是迄今為止唯一一種可以在任何設(shè)備上定位受眾，并提供無(wú)縫對(duì)接、精彩內(nèi)容的方式。實(shí)際上，響應(yīng)式網(wǎng)站已變得日益重要，因?yàn)楝F(xiàn)今大多數(shù)人出于各種原因都在使用多種設(shè)備（尤其是平板電腦和智能手機(jī)）瀏覽互聯(lián)網(wǎng)。
Food Sense（網(wǎng)址：http://foodsense.is/）,這是一個(gè)普通的左側(cè)博客風(fēng)格雜志布局加上眾多美味圖片充斥的一塊一塊的布局的網(wǎng)站，這個(gè)網(wǎng)站展示了它是如何轉(zhuǎn)化和適應(yīng)不同分辨率的，并讓用戶(hù)看起來(lái)這些網(wǎng)站是同一個(gè)網(wǎng)站。
然而，并沒(méi)有什么一致的網(wǎng)頁(yè)布局規(guī)律，這個(gè)是公認(rèn)的典型解決方案，用來(lái)吸引移動(dòng)網(wǎng)絡(luò)的在線讀者，贏得了新的用戶(hù)。與此同時(shí)，網(wǎng)站解決了視覺(jué)過(guò)載的美學(xué)問(wèn)題。
RWD的三項(xiàng)組成科技
彈性網(wǎng)格布局
大約公元20世紀(jì)90年代末，網(wǎng)站的寬度大都以百分比形式定義。 百分比布局使得網(wǎng)頁(yè)寬度能夠隨著查看它們的屏幕窗口大小變化，因而得名彈性布局。默認(rèn)情況下，網(wǎng)頁(yè)布局是彈性的。就它現(xiàn)在這個(gè)樣子把它打開(kāi)（還不包含媒體查詢(xún)），縮放 瀏覽器窗口，你會(huì)看見(jiàn)文本會(huì)根據(jù)屏幕縮放自動(dòng)重排。
2015年，我們有了寫(xiě)響應(yīng)式網(wǎng)站的更好的手段。CSS推出了一個(gè)新的布局模塊叫“彈性盒子” （Flexbox），已經(jīng)有很多瀏覽器都支持，可以在日常開(kāi)發(fā)中使用了。
除了用于實(shí)現(xiàn)彈性布局，F(xiàn)lexbox還可以用來(lái)居中內(nèi)容，改變標(biāo)記中的源碼順序，創(chuàng)建令人 驚艷的頁(yè)面布局。
彈性圖片/媒體
彈性圖片指的是不給圖片設(shè)置固定尺寸，而是根據(jù)流體網(wǎng)格進(jìn)行縮放，用于適應(yīng)各種網(wǎng)格的尺寸。
瀏覽器會(huì)根據(jù)屏幕的寬度和我們聲明的圖片的尺寸描述符去決定應(yīng)該使用哪張圖片，但是呢，因?yàn)槲覀優(yōu)g覽器已經(jīng)在大的分辨率下加載了大的圖片，那么瀏覽器會(huì)默認(rèn)你的圖片已經(jīng)放在緩存中了，使用大的圖片不會(huì)再有網(wǎng)絡(luò)的消耗，那么當(dāng)然是使用更大的圖片更好的了，所以在我們?cè)倏s小屏幕的時(shí)候?yàn)g覽器不會(huì)再去使用小圖片了，這是瀏覽器的一個(gè)默認(rèn)的行為。
媒體查詢(xún)
CSS3規(guī)范分成很多模塊，媒體查詢(xún)（3級(jí)）只是其中一個(gè)模塊。利用媒體查詢(xún)，可以根據(jù)設(shè) 備的能力應(yīng)用特定的CSS樣式。比如，可以根據(jù)視口寬度、屏幕寬高比和朝向（水平還是垂直） 等，只用幾行CSS代碼就改變內(nèi)容的顯示方式。
CSS3媒體查詢(xún)可以讓我們針對(duì)特定的設(shè)備能力或條件為網(wǎng)頁(yè)應(yīng)用特定的CSS樣式。翻開(kāi)W3C 的CSS3媒體查詢(xún)模塊的規(guī)范（https://www.w3.org/TR/css3-mediaqueries/），可以看到官方給媒體查詢(xún)下的定義：
“媒體查詢(xún)包含媒體類(lèi)型和零個(gè)或多個(gè)檢測(cè)媒體特性的表達(dá)式。width、height和 color都是可用于媒體查詢(xún)的特性。使用媒體查詢(xún)，可以不必修改內(nèi)容本身，而讓網(wǎng)頁(yè) 適配不同的設(shè)備。”
近幾年，隨著行動(dòng)裝置（智慧型手機(jī)、平板）的普及，以及行動(dòng)上網(wǎng)服務(wù)的使用率越來(lái)越高，傳統(tǒng)網(wǎng)頁(yè)的標(biāo)準(zhǔn)已經(jīng)無(wú)法符合這些裝置的需求來(lái)呈現(xiàn)了，尤其是以flash制作的動(dòng)畫(huà)，受限于行動(dòng)裝置運(yùn)算力不足的限制之下，已經(jīng)沒(méi)有行動(dòng)裝置可以直接瀏覽flash制作的網(wǎng)頁(yè)了。雖然可透過(guò)一些特殊的瀏器APP軟件來(lái)觀看，但方便性卻大大的降低。
而RWD又是如何達(dá)到的呢？
主要是以HTML5的標(biāo)準(zhǔn)及CSS3中的media queries來(lái)達(dá)到的。
在HTML5的標(biāo)準(zhǔn)中，我們可以指定頁(yè)面的寬度可以依照裝置的檢視寬度來(lái)呈現(xiàn)，再利用CSS3的media queries來(lái)設(shè)定不同寬度下使用不同的CSS來(lái)呈現(xiàn)頁(yè)面。因此設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，就必須要針對(duì)不同的寬度下的畫(huà)面編寫(xiě)不同的CSS檔案供瀏覽器來(lái)讀取。
RWD的優(yōu)點(diǎn)：
1.可使用同一套原始碼來(lái)撰寫(xiě)CSS，可以減少版面重新制作的時(shí)間。
2.可同時(shí)針對(duì)不同的分辨率來(lái)設(shè)定，增加頁(yè)面的可用性。
3.對(duì)于搜尋引擎的收錄不會(huì)造成影響，不影響SEO的結(jié)果。
4.開(kāi)發(fā)時(shí)間較APP來(lái)說(shuō)可以快速很多。
5.學(xué)習(xí)門(mén)坎較低，對(duì)于已經(jīng)從事網(wǎng)頁(yè)設(shè)計(jì)的人員來(lái)說(shuō)，此技術(shù)只是建構(gòu)在原本的DIV+CSS之上的一門(mén)技術(shù)，因此學(xué)習(xí)起來(lái)相對(duì)容易。
RWD與前端、后端的關(guān)系
Web前端:顧名思義是來(lái)做Web的前端的。我們這里所說(shuō)的前端泛指Web前端，也就是在Web應(yīng)用中用戶(hù)可以看得見(jiàn)碰得著的東西。包括Web頁(yè)面的結(jié)構(gòu)、Web的外觀視覺(jué)表現(xiàn)以及Web層面的交互實(shí)現(xiàn)。
Web后端：后端更多的是與數(shù)據(jù)庫(kù)進(jìn)行交互以處理相應(yīng)的業(yè)務(wù)邏輯。需要考慮的是如何實(shí)現(xiàn)功能、數(shù)據(jù)的存取、平臺(tái)的穩(wěn)定性與性能等。
簡(jiǎn)單來(lái)說(shuō)，前端開(kāi)發(fā)者(Frontend Developer)所做的就是開(kāi)發(fā)產(chǎn)品的前端，所謂的 應(yīng)用產(chǎn)品的前端就是用戶(hù)看到，接觸到和體驗(yàn)到的，他們主要做靜態(tài)用戶(hù)界面加上一些動(dòng)態(tài)效果，不涉及數(shù)據(jù)邏輯，前端考慮到的是用戶(hù)體驗(yàn)，而后端開(kāi)發(fā)者（Backend Developer）就不一樣了，他們是在后臺(tái)工作的，控制著前端的內(nèi)容，主要負(fù)責(zé)程序設(shè)計(jì)架構(gòu)思想，管理數(shù)據(jù)庫(kù)等。 下面這張圖就能很形象的表述這個(gè)的問(wèn)題：
最生動(dòng)的例子就是網(wǎng)站的登陸界面，在一個(gè)網(wǎng)站登陸頁(yè)面： 前端只要需要負(fù)責(zé)靜態(tài)頁(yè)面部分 ，鼠標(biāo)移入輸入框、移出輸入框的顏色變化這部分的內(nèi)容；但是輸入用戶(hù)名、密碼 后登錄系統(tǒng)的話要連接數(shù)據(jù)庫(kù)，這個(gè)就需要后臺(tái)開(kāi)發(fā)做邏輯處理了！
