網(wǎng)站的響應式設計：一切彈性化

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

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

在前文提到的Ethan Marcotte的文章中，他通過一個實例展示了響應式Web設計在頁面彈性方面的特性：

該實例的實現(xiàn)方式完美的結(jié)合了液態(tài)網(wǎng)格和液態(tài)圖片技術，并且聰明的在正確的地方使用了正確的HTML標記?！耙簯B(tài)網(wǎng)格”是一種很常見的實踐方式；對于“液態(tài)圖片”技術，下面的文章做了不錯的介紹：

• 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》，或是下載個樣章先：“怎樣創(chuàng)建彈性圖片”。另外，Zoe的這篇“Essential Resources for Creating Liquid and Elastic Layouts.”提供了不少關于創(chuàng)建彈性網(wǎng)格和布局的教程、資源、創(chuàng)意指導和最佳實踐方式。

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

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

?

其中，

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

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