開始第一篇。老規(guī)矩，先無聊的談?wù)撎鞖庖活惖脑掝}。十一長(zhǎng)假，天氣也終于開始有些秋天的味道，坐在屋里甚至覺得需要熱咖啡。話說兩年前也是在國(guó)慶假期里開始做Joomla文檔翻譯的；長(zhǎng)假好時(shí)光，總會(huì)可以抽出一兩天，安靜的窩在家里做做博客、學(xué)做些新東西，簡(jiǎn)直沒有比這更舒心的事情。

說正事兒。準(zhǔn)備在近期的幾篇里集中翻譯學(xué)習(xí)一下"響應(yīng)式Web設(shè)計(jì)"的相關(guān)話題，包括概念、實(shí)踐方式、案例及觀點(diǎn)討論等方面。相比于從前做的文檔譯文，這些文章篇幅要長(zhǎng)的多(甚至要加分頁了！)，今天放上的這篇幾乎花掉了兩天的"閑暇時(shí)間"；對(duì)耐力是個(gè)考驗(yàn)，努力提高嘍。廢話結(jié)束，here we go.

眼下，幾乎每個(gè)新客戶都希望他們的網(wǎng)站可以有專門的移動(dòng)設(shè)備版本。最完美的情況吶，就是為iPhone、iPad、黑莓、Kindle……各自打造一款——頁面分辨率還必須兼容任何設(shè)備。誰知道未來5年內(nèi)我們還需要為多少新發(fā)明的設(shè)備設(shè)計(jì)開發(fā)不同版本的頁面？這種瘋狂什么時(shí)候算個(gè)頭？

在Web設(shè)計(jì)和開發(fā)領(lǐng)域，很快的，我們將會(huì)無法跟上設(shè)備與分辨率革新的步伐。對(duì)于多數(shù)網(wǎng)站來說，為每種新設(shè)備及分辨率創(chuàng)建其獨(dú)立的版本根本就是不切實(shí)際的；結(jié)果就是，我們將會(huì)贏得使用某些設(shè)備的用戶群，而失去那些使用其他設(shè)備的用戶。不過，或許會(huì)有另外一種方式，可以幫助我們避免這種情況的發(fā)生。

響應(yīng)式Web設(shè)計(jì)(Responsive Web design)的理念是，頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說，頁面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。這樣，我們就可以不必為不斷到來的新設(shè)備做專門的版本設(shè)計(jì)和開發(fā)了。

響應(yīng)式Web設(shè)計(jì)的概念

Ethan Marcotte曾經(jīng)在A List Apart發(fā)表過一篇文章"Responsive Web Design"，文中援引了響應(yīng)式建筑設(shè)計(jì)的概念：

最近出現(xiàn)了一門新興的學(xué)科——"響應(yīng)式建筑(responsive architecture)"——提出，物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進(jìn)行響應(yīng)。結(jié)合嵌入式機(jī)器人技術(shù)以及可拉伸材料的應(yīng)用，建筑師們正在嘗試建造一種可以根據(jù)周圍人群的情況進(jìn)行彎曲、伸縮和擴(kuò)展的墻體結(jié)構(gòu)；還可以使用運(yùn)動(dòng)傳感器配合氣候控制系統(tǒng)，調(diào)整室內(nèi)的溫度及環(huán)境光。已經(jīng)有公司在生產(chǎn)"智能玻璃"：當(dāng)室內(nèi)人數(shù)達(dá)到一定的閥值時(shí)，這種玻璃可以自動(dòng)變?yōu)椴煌该�，確保隱私。

將這個(gè)思路延伸到Web設(shè)計(jì)的領(lǐng)域，我們就得到了一個(gè)全新的概念。為什么一定要為每個(gè)用戶群各自打造一套設(shè)計(jì)和開發(fā)方案？和響應(yīng)式建筑相似，Web設(shè)計(jì)同樣應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動(dòng)響應(yīng)及調(diào)整。

顯然，我們無法也無需使用運(yùn)動(dòng)傳感器或是機(jī)器人技術(shù)，響應(yīng)式Web設(shè)計(jì)更多需要的是抽象思維。好在，一些相關(guān)的概念已經(jīng)得到了實(shí)踐，比如液態(tài)布局、幫助頁面重新格式化的media queries和腳本等。但是響應(yīng)式Web設(shè)計(jì)不僅僅是關(guān)于屏幕分辨率自適應(yīng)以及自動(dòng)縮放的圖片等等，它更像是一種對(duì)于設(shè)計(jì)的全新思維模式。

調(diào)整分辨率

不同的設(shè)備都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不斷被研發(fā)著的各種新設(shè)備也將帶來新的屏幕尺寸規(guī)格。有些設(shè)備基于橫屏(portrait)，有些是豎屏(landscape)，甚至還有正方形；對(duì)于日益流行的iPhone、iPad及其他一些智能手機(jī)、平板電腦，用戶還可以通過轉(zhuǎn)動(dòng)設(shè)備來任意切換屏幕的定向方式。怎樣才能做到讓一種設(shè)計(jì)方案滿足所有情況？

要想做到同時(shí)兼容橫、豎屏(用戶還有可能在頁面加載的過程中切換方向)，我們就必須考慮N種屏幕尺寸規(guī)格。誠(chéng)然，我們可以將這些規(guī)格劃分為幾個(gè)大類，然后為每一類做一種方案，確保該方案至少在本組中盡量具有彈性。但即使這樣，結(jié)果也將是無比焦慮的，誰知道某類設(shè)備在5年之后的占有率是多少？而且很多用戶甚至不去將瀏覽器的窗口最大化；類似這樣的變數(shù)，我們還要考慮多少呢？

Morten Hjerde和他的同事們對(duì)2005至2008年市場(chǎng)中的400余種移動(dòng)設(shè)備進(jìn)行了統(tǒng)計(jì)(查看報(bào)告)，下圖展示了大致的統(tǒng)計(jì)結(jié)果：

在08年之后，更多更有代表性的新設(shè)備問世并普及了。顯然，我們不可以沿著"多方案"的思路繼續(xù)走下去；那么我們應(yīng)該怎樣做呢？

部分解決方案：一切彈性化

幾年前，彈性布局(flexible layout)幾乎是一種奢侈品，所謂彈性，也只是體現(xiàn)在豎排布局以及字號(hào)等方面；圖片始終可以輕易的破壞頁面結(jié)構(gòu)，而且即使是哪些彈性的元素結(jié)構(gòu)，在很極端的情況下，仍會(huì)破壞布局。所以，所謂的彈性布局其實(shí)并非那樣彈性，它有時(shí)甚至不能適應(yīng)臺(tái)式機(jī)與筆記本的屏幕分辨率差異，更不用說手機(jī)等移動(dòng)設(shè)備了。

現(xiàn)在，我們可以通過響應(yīng)式的設(shè)計(jì)和開發(fā)思路讓頁面更加"彈性"了。圖片的尺寸可以被自動(dòng)調(diào)整，頁面布局再不會(huì)被破壞。雖然永遠(yuǎn)沒有最完美的解決方案，但它給了我們更多選擇。無論用戶切換設(shè)備的屏幕定向方式，還是從臺(tái)式機(jī)屏幕轉(zhuǎn)到iPad上瀏覽，頁面都會(huì)真正的富有彈性。

在前文提到的Ethan Marcotte的文章中，他通過一個(gè)實(shí)例展示了響應(yīng)式Web設(shè)計(jì)在頁面彈性方面的特性：

該實(shí)例的實(shí)現(xiàn)方式完美的結(jié)合了液態(tài)網(wǎng)格和液態(tài)圖片技術(shù)，并且聰明的在正確的地方使用了正確的HTML標(biāo)記。"液態(tài)網(wǎng)格"是一種很常見的實(shí)踐方式；對(duì)于"液態(tài)圖片"技術(shù)，下面的文章做了不錯(cuò)的介紹：

Hiding and Revealing Portions of Images

Creating Sliding Composite Images

Foreground Images That Scale With the Layout

說到創(chuàng)建液態(tài)頁面，最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》，或是下載個(gè)樣章先："怎樣創(chuàng)建彈性圖片"。另外，Zoe的這篇"Essential Resources for Creating Liquid and Elastic Layouts."提供了不少關(guān)于創(chuàng)建彈性網(wǎng)格和布局的教程、資源、創(chuàng)意指導(dǎo)和最佳實(shí)踐方式。

從技術(shù)角度講，雖然聽上去這些都簡(jiǎn)單可行，但它比"將這些功能結(jié)合在一起"要復(fù)雜些。舉個(gè)例子，仔細(xì)觀察Ethan Marcotte提供的實(shí)例中的logo圖片：

如果我們將瀏覽器窗口不斷調(diào)小，會(huì)發(fā)現(xiàn)logo圖片的文字部分始終會(huì)保持同比縮小，保證其完整可讀，而不會(huì)和周圍的插圖一樣被兩邊裁掉。所以整個(gè)logo其實(shí)包括兩部分：插圖作為頁面標(biāo)題的背景圖片，會(huì)保持尺寸，但會(huì)隨著布局調(diào)整而被裁切；文字部分則是一張單獨(dú)的圖片。

<h1 id="logo">

  <a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a>

</h1>

其中，<h1>元素使用插圖作為背景，文字部分的圖片始終保持與背景的對(duì)齊。

這個(gè)實(shí)例小小的展示一下響應(yīng)式Web設(shè)計(jì)的思路。不過這點(diǎn)小努力還不足以避免整個(gè)布局在小尺寸窗口中變的過窄或過短，并且logo文字最終會(huì)變的小到難以識(shí)別，背景圖片也會(huì)被過多的裁切。

標(biāo)簽： Web設(shè)計(jì) 響應(yīng)式Web設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。