響應式網站(zhàn)設計(jì)

　　響應式網站(zhàn)設計(jì)是(shì✘)一(yī)種網絡頁面設計(jì)布局，其理(lǐ)念是(shì)​：集中創建頁面的(de)圖片排版大(dà)小(xiǎo)，可(kě)♦以智能(néng)地(dì)根據用(yòng)戶行("xíng)為(wèi)以及使用(yòng)的(de)設備環境進行(xíng)相(xiàng)對φ(duì)應的(de)布局。

設計(jì)理(lǐ)念

　　此概念于2010年(nián)5月(yuè)由國(guó)外(wài)著名網頁設計(jì)師•(shī)Ethan Marcotte所提出。

　　響應式網站(zhàn)設計(jì)(Responsive Web design)的(de )理(lǐ)念是(shì)：

　　頁面的(de)設計(jì)與開(kāi)'發應當根據用(yòng)戶行(xíng)為(wèi)×以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行(xíng)相(xiàng)應的(€de)響應和(hé)調整。具體(tǐ)的(dβe)實踐方式由多(duō)方面組成，包括彈性網格和(hé)布局、圖片、CSS media q uery的(de)使用(yòng)等。無論用♦(yòng)戶正在使用(yòng)筆(bǐ)記本還(hái)是(shì )iPad，我們的(de)頁面都(dōu)應該能(néng)夠自(zì)動切換分(fēn)辨率☆、圖片尺寸及相(xiàng)關腳本功能(​néng)等，以适應不(bù)同設備；換句ε話(huà)說(shuō)，頁面應該有(​yǒu)能(néng)力去(qù)自(zì<)動響應用(yòng)戶的(de)設備環境。響應式網頁設計(₽jì)就(jiù)是(shì)一(yī)個(gè)網站(zhàn)能(néng)夠兼容多↓(duō)個(gè)終端——而不(bù)是(shì)為(wèi)每個(©gè)終端做(zuò)一(yī)個(gè)特定的(de)版本。這∏(zhè)樣，我們就(jiù)可(kě)以不(bù)必為(wèi)不(bù)斷到(dào)來(l↕ái)的(de)新設備做(zuò)專門(mén)的(de)版↓本設計(jì)和(hé)開(kāi)發了(le↕)。

曆史

　　Ethan Marcotte 在他(tā)在Aε List Apart的(de)文(wén)>章(zhāng)中發明(míng)了(le)術(shù)語 Responsive Web Desi☆gn (RWD)。他(tā)在他(tā) 2011 年(n≠ián)關于這(zhè)個(gè)主題所寫的(d<e)簡短(duǎn)的(de)書(shū)中描述了♣(le)響應式網頁設計(jì)的(de)理(lǐ)論和(hé)實踐。響應式設計(jì)被≠.net 雜(zá)志(zhì)列為(wèi) 20σ12 年(nián)頂級網頁設計(jì) 趨勢的(de)第二名 (漸進增強是(shì)第€一(yī)名)。他(tā)們也(yě)列出了(le) Ethan Ma×rcotte 最喜歡的(de)響應式站(zhàn)π點之中的(de)20個(gè)。

提出

　　Ethan Marcotte曾經在A σList Apart發表過一(yī)篇文(wén)章(zhāng)"Respon‍sive Web Design"，文(wén)中援引了(le)響應式建築設計($jì)的(de)概念：現(xiàn)出現(xi♠àn)了(le)一(yī)門(mén)新興的(de)學科(kē)——&quo​t;響應式架構(responsive archit&ecture)"——提出，物(w₽ù)理(lǐ)空(kōng)間(jiān)應€該可(kě)以根據存在于其中的(de)人(rén)的(de)情況進行≈(xíng)響應。結合嵌入式機(jī)器(qì)人(rén)技(jì)術(shù)以及可(kě≠)拉伸材料的(de)應用(yòng)，建築師(shī)們正在嘗試建造一(yī)種可(×kě)以根據周圍人(rén)群的(de)情況進行(xíng)彎曲、≥伸縮和(hé)擴展的(de)牆體(tǐ)結構；還(hái)可(kě)以使用(☆yòng)運動傳感器(qì)配合氣候控制(zhì)系統，調整室內(nèi)π的(de)溫度及環境光(guāng)。已經有(yǒu)公司在生(shēng)β産"智能(néng)玻璃"：當室內(nèi)人(rén‌)數(shù)達到(dào)一(yī)定的(de)阈值時≈(shí)，這(zhè)種玻璃可(kě)以自(zì)動變為(wèi)不(bù)透明(mín≈g)，确保隐私。

　　将這(zhè)個(gè)思路(lù)延伸到(dào)Web設計(jì)的(de)領域，我 們就(jiù)得(de)到(dào)了(le)一(yī)個(gè)全新的(de)概念。為(σwèi)什(shén)麽一(yī)定要(yào)為(wèi)每個(gè)用(yòng)戶群各✘自(zì)打造一(yī)套設計(jì)和(hé)開(kāi)發方案？和(hé)響應式建築相(xi↓àng)似，Web設計(jì)同樣應該做§(zuò)到(dào)根據不(bù)同設備環境自(zì)動響應及調整。

　　顯然，我們無法也(yě)無需使用(yòng)運動傳•感器(qì)或是(shì)機(jī)器(qì)人(rén)技(jì)術(shù)，響應式Web設↕計(jì)更多(duō)需要(yào)的(de)是(shì)抽象思維。好(hǎo)在，一(y‍ī)些(xiē)相(xiàng)關的(de)概念已經得(de)到(dào)了(le←)實踐，比如(rú)液态布局、幫助頁面重新格式化(huà)的$(de)media queries和(hé)腳本等。但(dàn)是(shì)響★應式Web設計(jì)不(bù)僅僅是(shì)關于屏幕分(fēn)辨率自(zì)$适應以及自(zì)動縮放(fàng)的(de)圖片等等，它✔更像是(shì)一(yī)種對(duì)于設計(jì)的(de)全新思維模式。

技(jì)術(shù)手段

　　一(yī)切彈性化(huà)：

　　我們通(tōng)過響應式的(de)設計(jì)和(hé)開(kāi∞)發思路(lù)讓頁面更加"彈性"了(le)。圖片的(αde)尺寸可(kě)以被自(zì)動調整，頁面

　　液态圖片技(jì)術(shù)

　　液态圖片技(jì)術(shù)

　　布局再不(bù)會(huì)被破壞。雖然永遠(yuǎn)沒有(yǒu)最合✔适的(de)解決方案，但(dàn)它給了(le)我們更多(duō)選擇。無≈論用(yòng)戶切換設備的(de)屏幕定向方式，還(hái)是(shì)從(cóng)台式→機(jī)屏幕轉到(dào)iPad上(shàng)浏覽，頁面都(dōu)會(huì)★真正的(de)富有(yǒu)彈性。

　　通(tōng)過液态網格和(hé)液态圖片技(jì)術(shùε)，并且在正确的(de)地(dì)方使用(yòng)了(le)正确的(de)HTML标記。

　　響應式圖片：

　　響應式圖片技(jì)術(shù)思想：不(bù)僅要(yào)同比的(de)縮放(fàng)圖ε片，還(hái)要(yào)在小(xiǎo)設備上(s§hàng)降低(dī)圖片自(zì)身(shēn)的(de )分(fēn)辨率。這(zhè)個(gè)技(jì)術(s™hù)的(de)實現(xiàn)需要(yào)使用(yòng)幾個(g∑è)相(xiàng)關文(wén)件(j‍iàn)，我們可(kě)以在Github上(shàng)獲取。包括一(yī)個(gè)​JavaScript文(wén)件(jiàn)(rwd-images.js™)，一(yī)個(gè).htaccess文(wén)件(jiàn)，以及一(÷yī)些(xiē)範例資源文(wén)件(jiàn)。大(d₹à)緻的(de)原理(lǐ)是(shì)，rwd-images.js會(huì)檢測當前↑設備的(de)屏幕分(fēn)辨率，如(rú)果是(shì)大(dà)屏幕設備，則向頁面h>ead部分(fēn)中添加BASE标記，并将後續的(de)圖片、腳本和(hé)樣式表加載請×(qǐng)求定向到(dào)一(yī)™個(gè)虛拟路(lù)徑"/rwd-router"。當這(zhè)δ些(xiē)請(qǐng)求到(dào)達服務器(qì)端，.htacces文(wén)件®(jiàn)會(huì)決定這(zhè)些(xiē)請(qǐng)求所需要(yào)的÷(de)是(shì)原始圖片還(hái)是(shì)小(xiǎo)尺寸的(de)&qεuot;響應式圖片"，并進行(xíng)相(xi±àng)應的(de)反饋輸出。對(duì)于小(xiǎo)屏幕的¥(de)移動設備，原始尺寸的(de)大(dà)圖片永遠(yuǎn)不(bù)會(huì)被用(yò♠ng)到(dào)。

趨勢

　　響應式設計(jì)在2012年(nián)被提的(de)比較多(du ō)，但(dàn)是(shì)響應式設計(jì¥)仍然在不(bù)斷變化(huà)，不(bù)斷創ε新。比如(rú)，新的(de)設備不(bù)斷出來(lái)(iPad Mini)，這(zh♥è)讓以前的(de)設計(jì)想法土(tǔ)崩瓦解。而各種We≈b的(de)響應式設計(jì)也(yě)獲得(de)了(le)越來(lái£)越多(duō)的(de)注意，“讓人(rén)們忘記設備尺寸”的(de)理(lǐ)念将更快(k uài)地(dì)驅動響應式設計(jì)，所以Web設計(Ωjì)也(yě)将迎來(lái)更多(duō)的(d¶e)響應式設計(jì)元素。

　　UIKit

　　UIkit 是(shì)一(yī)個(gè)輕量級、模塊化(huà)的(de)✘前端框架，可(kě)快(kuài)速構建強大(dà)的(de)web‌前端界面。它根據不(bù)同的(de)屏幕分(fēn)辨率與上(shàσng)網設備，會(huì)自(zì)動做(zuò)出響應，提供一(yī)緻的(de)體( tǐ)驗。

　　Bootstrap

　　由兩個(gè)Twitter員(yuán)工(gōng)開✔(kāi)發并開(kāi)源的(de)前端框架，已經更新到(dào)≥了(le)v4.1.2版本，在Github上(shàng)非常火(h→uǒ)爆，在國(guó)內(nèi)也(yě)有(yǒu)很↔(hěn)多(duō)粉絲，值得(de)一(yī)試。

　　Adobe Edge Inspect

　　對(duì)移動開(kāi)發者尤其有(yǒu)用(yòng)的(de)工(gōng)✘具，其前身(shēn)是(shì) Adobe Shadow，用(yòng)于幫助‍設計(jì)師(shī)和(hé)開(kāi)發者同時(shí)在多(duō)個(gè)移動₹設備上(shàng)預覽應用(yòng)設計(jì)，發現(xiàn)和(hé)解決跨平台©問(wèn)題。

　　Responsive Web Design Sketch Sheet™s

　　如(rú)果你(nǐ)還(hái)在用(yòng)紙(zhǐ)和(hé)筆₹(bǐ)來(lái)創建你(nǐ)的(de)實體(tǐ)模型，你(nǐ)可↔(kě)以用(yòng)這(zhè)些(xiē)現(xiàn)有(yǒu)的(de)π草(cǎo)圖來(lái)設計(jì)你(nǐ)的(de)交互網站(zhàn)了(le)£。

　　Foundation

　　号稱是(shì)世界上(shàng)最先進的(de)響應式前端框架。

　　SimpleGrid

　　輕量級的(de)響應式 CSS 網格系統，β讓你(nǐ)可(kě)以快(kuài)速創建适應于手機(jī)和(hé)平闆電(diàn)₽腦(nǎo)的(de)網站(zhàn)。

　　Responsive Testing

　　這(zhè)個(gè)工(gōng)具可(kě)以讓你(nǐ)預覽∞你(nǐ)設計(jì)網頁在不(bù)同設備上(sh​àng)的(de)效果，隻需要(yào)訪問(wèn)它的(de)網站(zhàn)并輸入你(σnǐ)網站(zhàn)的(de)地(dì)址就(j iù)可(kě)以看(kàn)到(dào)了(le)。