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