如果你之前從未聽說過響應設計，那么你可以好好讀讀Marcotte的介紹文章。

簡而言之，響應設計就是使用非固定的網(wǎng)格、非固定的布局和@多媒體查詢使得現(xiàn)在的(以及將來的)web能夠適應不同尺寸的屏幕。無論你的用戶使用的是一個電話，一個iPad或是巨大的臺式顯示器，你的網(wǎng)站都能夠適應。

響應設計將成為一個非常有吸引力的工具，正如Luke Wroblewski所說的，設計需要遵循移動優(yōu)先原則。也就是，從小屏幕開始考慮。先理清你的網(wǎng)站的核心，然后一點點開始構(gòu)建。從骨架開始構(gòu)建能夠保證網(wǎng)站的質(zhì)量，促使開發(fā)人員關(guān)注用戶所關(guān)注的問題。

你打算如何構(gòu)建一個響應良好的網(wǎng)站呢?這個問題因人而異，但是還是存在一些通用的方法的。為了幫助你開始響應設計，這里列出了一些初期設計時的***實踐經(jīng)驗，都是從大量的web資源中總結(jié)出來的：

使用@media控制你的屏幕布局，但是需要記住，只有這些并不是一個真正的響應設計。

使用非固定的布局適應各種屏幕的尺寸。不要將你的設計限制在iPhone或是Android上，不要將它切割為平板電腦版本和桌面電腦版本。布局設計需要更加靈活可變，否則，如果某個新的屏幕尺寸突然變成潮流，你的網(wǎng)站將無法應對。

根據(jù)你的網(wǎng)站的具體內(nèi)容設定你的網(wǎng)格。封裝好的網(wǎng)格系統(tǒng)可能并不適用于你的應用。這類網(wǎng)格的***問題就是它們可能與你的具體內(nèi)容不符。根據(jù)網(wǎng)站內(nèi)容設計你的布局，而不是根據(jù)canvas(或是網(wǎng)格)。

從小屏幕開始。從***的屏幕開始設計，然后逐步在浮動元素中加入@media規(guī)則，滿足更大的平板或是桌面瀏覽器的窗口需要。從一個窄的單列布局開始設計移動瀏覽器網(wǎng)站，然后再逐步擴大。

使用Respond或是CSS3 Media Queries這類JavaScript庫引導@media查詢，因為在舊版本的瀏覽器中可能不支持直接的@media查詢。從最小的屏幕開始然后逐步擴大意味著，桌面瀏覽器需要處理@media，確保使用Respond這類輔助工具能夠支持舊版本的瀏覽器處理@media。

不要指望Photoshop，在瀏覽器中構(gòu)建你的組件。使用Photoshop構(gòu)建動態(tài)的布局壓根就沒有可能性，應該在瀏覽器中實現(xiàn)。

使用img { max-width: 100%; }控制圖像大小。對于大規(guī)模的圖像，可以考慮在小屏幕中使用Responsive Images這類工具縮小圖像的大小，然后在大屏幕中使用JavaScript還原大圖像。

延遲下載?？赡苣愕木W(wǎng)站中有些輔助元素，能夠優(yōu)化你的網(wǎng)站，但并不是必須的。這類元素可以在下載完基本內(nèi)容后再使用JavaScript加載這些元素。

不用處處要求***。即使做到了上述建議，你可能還是會漏掉某些使用不支持JavaScript的舊版本瀏覽器的用戶?，F(xiàn)在這樣的用戶已經(jīng)越來越少了，如果他們在桌面瀏覽器中看到了移動版本的布局，這也并不就是世界末日。你的網(wǎng)站已經(jīng)具備很好的可用性了。

記住響應設計是一個非常年輕的概念——是一個新的工具——每天都會涌現(xiàn)出一些新的東西。不要將上面的建議當做是一些硬性或是速成的規(guī)則，它只是一些引導指南罷了。

原文：http://www.webapptrend.com/2011/12/1253.html

【編輯推薦】

1. 移動優(yōu)先的設計常識：應用如何組織？
2. 走近Node.js的異步代碼設計
3. Web設計VS App設計：互相學習到了什么
4. 為什么“開發(fā)人員友好性”是API設計的核心
5. 你必須知道的100件關(guān)于設計的事