響應式網站(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ì)(Res✔↓β→ponsive Web design)的(de)理(lǐ)念是(π₹shì)：

　　頁面的(de)設計(jì)與開(kāi)發應當根據用(π₩≤§yòng)戶行(xíng)為(wèi)以及設備環境(系統平台、屏幕尺✔≤β寸、屏幕定向等)進行(xíng)相(xiàng)應的(de)響應和(h$♥é)調整。具體(tǐ)的(de)實踐方式由多(duō)方面組成，包括彈性網≠☆格和(hé)布局、圖片、CSS media query的( δ→Ω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 Apa"™•$rt的(de)文(wén)章(zhāng)中發明(míng)了(le)術(s>•§hù)語 Responsive Web Design (RWD)。他 ↔∏★(tā)在他(tā) 2011 年(niá₹★©n)關于這(zhè)個(gè)主題所寫的(d<ε¥e)簡短(duǎn)的(de)書(shū)中∑±₩描述了(le)響應式網頁設計(jì)的(♥πde)理(lǐ)論和(hé)實踐。響應式設計(jì)被.net ♥→雜(zá)志(zhì)列為(wèi) 2012 年★•α(nián)頂級網頁設計(jì)趨勢的(de)第二名 (漸進增強"™↔ 是(shì)第一(yī)名)。他(tā)們∏©↑也(yě)列出了(le) Ethan Marcotte 最喜歡的(d©₩♥e)響應式站(zhàn)點之中的(de)20個(gè)。

提出

　　Ethan Marcotte曾經在A List Apaγαδ rt發表過一(yī)篇文(wén)章(zhāng)"Responσ©♦™sive Web Design"，文(wén)中♣★援引了(le)響應式建築設計(jì)的(de)概念：現‌♦(xiàn)出現(xiàn)了(le)一(yī)門(mén)新興的(de)£♥×學科(kē)——"響應式架構(responsive architec®•&ture)"——提出，物(wù)理(lǐ)空(kōn÷±×g)間(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•©íng)，确保隐私。

　　将這(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ànπ∑$¶g)似，Web設計(jì)同樣應該做(zu×φò)到(dào)根據不(bù)同設備環境自(zì)動響應及調整。

　　顯然，我們無法也(yě)無需使用(yòn©™αεg)運動傳感器(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 queriσεes和(hé)腳本等。但(dàn)是(shì)響應式Weσ±b設計(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ì)真正的(dπ€φ☆e)富有(yǒu)彈性。

　　通(tōng)過液态網格和(hé)液βΩβ∞态圖片技(jì)術(shù)，并且在正确的(de)地(d✔δì)方使用(yòng)了(le)正确的(de)HTM±≥δ♣L标記。

　　響應式圖片：

　　響應式圖片技(jì)術(shù)思想：不(bù)僅要(€↔<yào)同比的(de)縮放(fàng)圖片，還(hái)要(y ✔φ®ào)在小(xiǎo)設備上(shàng)降低(dī)圖片自(z<εì)身(shēn)的(de)分(fēn)辨率。這(zhè)個♣✘(gè)技(jì)術(shù)的(de)實現(x∞£×‍iàn)需要(yào)使用(yòng)幾個(gè±γ£€)相(xiàng)關文(wén)件(jiàn)，我們可(kě)以在Git&£‌βhub上(shàng)獲取。包括一(yī)個(gè)J§®≠↕avaScript文(wén)件(jiàn)(rwd-imag​↓es.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à)λΩ​屏幕設備，則向頁面head部分(fēn)中添加BASE标記，并将後續的×✔(de)圖片、腳本和(hé)樣式表加載請(qǐng)求定向到(dào)<∞一(yī)個(gè)虛拟路(lù)徑"/rwd-routπ>≥er"。當這(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)"響應式圖片≠∞"，并進行(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ǔ)崩瓦解。而各種Web的(de)¶®響應式設計(jì)也(yě)獲得(de)了(le)越來( ←lái)越多(duō)的(de)注意，“讓人(₽÷rén)們忘記設備尺寸”的(de)理(lǐ)念将更快(>↓‍Ωkuà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)非常火(huǒ®∏¥)爆，在國(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 Sh ∑"≥adow，用(yòng)于幫助設計(jì)師(shī)和(h♣Ω↑₽é)開(kāi)發者同時(shí)在多(duō)個(gè)移動設備上(s♠↕αhàng)預覽應用(yòng)設計(jì)，發現(xià☆≥↓←n)和(hé)解決跨平台問(wèn)題。

　　Responsive Web Design Sketch Sheets

　　如(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ì)址就(jiù)可<σΩ(kě)以看(kàn)到(dào)了(le)​®γ。