顯然,我們無法也無需使用運(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ù),我們還要考慮多少呢?
在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ò)的介紹:
說到創(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ú)的圖片。