響應設計的技巧，秘訣和最佳實踐
如果你之前從未聽說過響應設計，那么你可以好好讀讀Marcotte的介紹文章。
簡而言之，響應設計就是使用非固定的網格、非固定的布局和@多媒體查詢使得現在的(以及將來的)web能夠適應不同尺寸的屏幕。無論你的用戶使用的是一個電話，一個iPad或是巨大的臺式顯示器，你的網站都能夠適應。
響應設計將成為一個非常有吸引力的工具，正如Luke Wroblewski所說的，設計需要遵循移動優先原則。也就是，從小屏幕開始考慮。先理清你的網站的核心，然后一點點開始構建。從骨架開始構建能夠保證網站的質量，促使開發人員關注用戶所關注的問題。
你打算如何構建一個響應良好的網站呢?這個問題因人而異，但是還是存在一些通用的方法的。為了幫助你開始響應設計，這里列出了一些初期設計時的***實踐經驗，都是從大量的web資源中總結出來的：
使用@media控制你的屏幕布局，但是需要記住，只有這些并不是一個真正的響應設計。
使用非固定的布局適應各種屏幕的尺寸。不要將你的設計限制在iPhone或是Android上，不要將它切割為平板電腦版本和桌面電腦版本。布局設計需要更加靈活可變，否則，如果某個新的屏幕尺寸突然變成潮流，你的網站將無法應對。
根據你的網站的具體內容設定你的網格。封裝好的網格系統可能并不適用于你的應用。這類網格的***問題就是它們可能與你的具體內容不符。根據網站內容設計你的布局，而不是根據canvas(或是網格)。
從小屏幕開始。從***的屏幕開始設計，然后逐步在浮動元素中加入@media規則，滿足更大的平板或是桌面瀏覽器的窗口需要。從一個窄的單列布局開始設計移動瀏覽器網站，然后再逐步擴大。
使用Respond或是CSS3 Media Queries這類JavaScript庫引導@media查詢，因為在舊版本的瀏覽器中可能不支持直接的@media查詢。從最小的屏幕開始然后逐步擴大意味著，桌面瀏覽器需要處理@media，確保使用Respond這類輔助工具能夠支持舊版本的瀏覽器處理@media。
不要指望Photoshop，在瀏覽器中構建你的組件。使用Photoshop構建動態的布局壓根就沒有可能性，應該在瀏覽器中實現。
使用img { max-width: 100%; }控制圖像大小。對于大規模的圖像，可以考慮在小屏幕中使用Responsive Images這類工具縮小圖像的大小，然后在大屏幕中使用JavaScript還原大圖像。
延遲下載。可能你的網站中有些輔助元素，能夠優化你的網站，但并不是必須的。這類元素可以在下載完基本內容后再使用JavaScript加載這些元素。
不用處處要求***。即使做到了上述建議，你可能還是會漏掉某些使用不支持JavaScript的舊版本瀏覽器的用戶。現在這樣的用戶已經越來越少了，如果他們在桌面瀏覽器中看到了移動版本的布局，這也并不就是世界末日。你的網站已經具備很好的可用性了。
記住響應設計是一個非常年輕的概念——是一個新的工具——每天都會涌現出一些新的東西。不要將上面的建議當做是一些硬性或是速成的規則，它只是一些引導指南罷了。
原文：http://www.webapptrend.com/2011/12/1253.html
【編輯推薦】
