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

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

調(diào)整分辨率

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

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

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

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

說(shuō)到創(chuàng)建液態(tài)頁(yè)面，最好看看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í)踐方式。

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

其中，

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

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