眼下，幾乎所有的新客戶(hù)都希望Web設計師和開(kāi)發(fā)者給自己的網(wǎng)站設計專(zhuān)門(mén)的移動(dòng)版本。最好是黑莓、iPhone、iPad、. 上 網(wǎng)本還有Kindle各自都有一款，另外屏幕分辨率還都得兼容。接下來(lái)的幾年里，我們可能還會(huì )為數不清的新移動(dòng)終端開(kāi)發(fā)設計，而這種瘋狂何時(shí)才是盡頭呢?甭想了，它根本沒(méi)有盡頭。在網(wǎng)站設計與開(kāi)發(fā)領(lǐng)域，我們會(huì )越來(lái)越跟不上新分辨率和新設備更新?lián)Q代的步伐。對于許多網(wǎng)站而言，為每個(gè)分辨率和新設備開(kāi)發(fā)一個(gè)網(wǎng)站版本幾乎是不可能的，或者說(shuō)是不切實(shí)際的。我們可能會(huì )顧此失彼，在保證某個(gè)設備的用戶(hù)群的同時(shí)，失去了使用其他設備的用戶(hù)。有別的更好的辦法么? 響應式網(wǎng)站設計的理念是網(wǎng)站頁(yè)面的設計與開(kāi)發(fā)應該根據用戶(hù)的行為和基于用戶(hù)的屏幕大小、系統平臺和屏幕方向的使用環(huán)境作出相應的回應。具體操作則包括彈性網(wǎng)格、布局、圖片和CSS媒體查詢(xún)的靈活使用，等等。用戶(hù)從筆記本切換到iPad時(shí)，網(wǎng)頁(yè)應該自動(dòng)調整應對所用設備的分辨率、圖像大小和腳本功能。換句話(huà)說(shuō)，網(wǎng)站應該有這樣的技術(shù)能力，隨時(shí)隨地回應用戶(hù)的需要。這樣我們就可以不用為層出不窮的新設備做專(zhuān)|門(mén)的設計與開(kāi)發(fā)了。響應式網(wǎng)站設計的概念關(guān)于這個(gè)設計理念，EthanMarcotte曾在A(yíng) List Apart.上發(fā)表過(guò)一篇文章- -Responsive Web Design。它來(lái)源于響應式建筑設計理論，即某個(gè)空間隨著(zhù)內部人群的流動(dòng)和數量而自動(dòng)調整。最近出現了一門(mén)新興的學(xué)科，即“響應式建筑”，該學(xué)科開(kāi)始探索物理空間該如何對空間里來(lái)回的人做出反應。結合嵌入式機器人和抗拉材料，建筑師們正嘗試建造一種藝術(shù)化的墻體結構，它可以根據周?chē)巳旱那闆r進(jìn)行彎曲、伸縮和擴展。在人群進(jìn)入室內的時(shí)候，運動(dòng)傳感器可以配合氣候控制系統，調整室內溫度和燈光氛圍。已經(jīng)有公司生產(chǎn)出了“智能玻璃”，當室內人數達到一定密度值時(shí)，玻璃會(huì )自動(dòng)變成不透明，增強隱私保護。將此思路延伸到網(wǎng)站設計中來(lái)，我們就得到-個(gè)相似但又是全新的概念。我們?yōu)槭裁匆獮槊總€(gè)用戶(hù)群打造個(gè)性化的設計?畢竟，建筑師們不可能根據每次來(lái)訪(fǎng)人數不同而重新設計建造出新建筑來(lái)。和響應式建筑同理，網(wǎng)站設計也要做到自動(dòng)調整，而不是為每個(gè)新用戶(hù)群創(chuàng )造出難以計數的個(gè)性化方案。顯然，我們不能依靠運動(dòng)傳感器或機器人，就像建造大樓那樣來(lái)設計網(wǎng)站，響應式網(wǎng)站設計看重的是抽象思維。不過(guò)，有些概念已在實(shí)踐中操練過(guò)，比如液態(tài)布局、能夠輕松(或自動(dòng))重新格式化頁(yè)面的媒體查詢(xún)和腳本。但是響應式網(wǎng)站設計不僅是關(guān)于設計可調屏幕分辨率和可自動(dòng)縮放的圖像，它更是一種全新的設計思維模式。下面我們來(lái)談?wù)劜僮鬟^(guò)程中的這些功能特征以及其他相關(guān)概念。
調整屏幕分辨率
不同的設備，其屏幕分辨率、清晰度以及屏幕方向都各自不同。每天都有各種新設備誕生，隨之而來(lái)的是不同的屏幕尺寸，而且每個(gè)設備或許都能兼容各種尺寸、功能甚至是顏色。有的是橫屏，有的是豎屏，甚至還有正方形屏幕。而隨著(zhù)iPhone、iPad以及 高級智能手機的流行，許多新設備都可以隨意進(jìn)行橫屏豎屏切換。怎樣的設計才能滿(mǎn)足上述所有情況呢? 除了橫屏豎屏(同時(shí)確保用戶(hù)在頁(yè)面加載過(guò)程中就能切換自如)的兼容問(wèn)題，我們還要考慮到千變萬(wàn)化的屏幕尺寸。當然，我們可以給這些尺寸歸類(lèi)，然后每一-類(lèi)對應一種設計方案，并盡力確保每個(gè)設計的靈活性。但即便如此，任務(wù)也還是會(huì )繁重不堪，何況誰(shuí)知道五年之后其使用數量會(huì )是怎樣?而且許多用戶(hù)甚至不會(huì )去最大化瀏覽器窗口，光這一點(diǎn)就讓屏幕尺寸的變數更大了。
   部分解決方案:一切彈性化
幾年前，彈性布局(flexible layout)對網(wǎng)站而言幾乎是一種奢侈品，當時(shí)唯一的彈性設計只是在布局安排和字體設計方面。圖片動(dòng)不動(dòng)就破壞頁(yè)面布局，而且即使是那些彈性結構元素，在極端情況下，也會(huì )破壞布局一-它們可以有幾百像素的變化，可一旦從電腦大屏幕切換到上網(wǎng)本時(shí)常常就無(wú)法調整。
           現在，我們可以做到更大的彈性化。圖片尺寸可自動(dòng)調整，而且我們有應對方案可以保證頁(yè)面布局不會(huì )遭到破壞(盡管在此過(guò)程中它們可能會(huì )被壓縮且難以辨認) 。雖然這不是一勞永逸的辦法，但卻給了我們更多的選擇。設備橫屏豎屏可以瞬間切換，也能滿(mǎn)足較大的電腦屏幕切換到iPad。
   在前文提到的Ethan Marcotte的文章中，他通過(guò)網(wǎng)站設計實(shí)例展示了這個(gè)更靈活的頁(yè)面布局。