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