Ethan Marcotte曾經在A List Apart發表過一篇文章“Responsive Web Design”，文中援引了響應式建筑設計的概念：

將這個思路延伸到Web設計的領域，我們就得到了一個全新的概念。為什么一定要為每個用戶群各自打造一套設計和開發方案？和響應式建筑相似，Web設計同樣應該做到根據不同設備環境自動響應及調整。

調整分辨率

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

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

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

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

說到創建液態頁面，最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》，或是下載個樣章先：“怎樣創建彈性圖片”。另外，Zoe的這篇“Essential Resources for Creating Liquid and Elastic Layouts.”提供了不少關于創建彈性網格和布局的教程、資源、創意指導和好實踐方式。

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

其中，

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

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

文章名稱：什么是響應式網站設計。
本文鏈接：http://m.kartarina.com/news/78918.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有響應式網站等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯