目前,智能手機,平板和上網(wǎng)本的發(fā)展速度是***的。這就是為什么響應(yīng)式的頁面設(shè)計在當(dāng)今web領(lǐng)域是最熱的話題的原因。所謂的響應(yīng)式頁面設(shè)計，其實質(zhì)就是一種設(shè)計web頁面的方法，能令到頁面能根據(jù)屏幕的大小、操作系統(tǒng)和設(shè)備的橫豎向去對用戶的操作行為和環(huán)境作出合適的響應(yīng)。再簡單的說，那就是讓用戶能輕松地在各種不同移動設(shè)備中能自適應(yīng)地看到各種不同的圖片和布局。

響應(yīng)式網(wǎng)頁設(shè)計能讓開發(fā)者為訪問網(wǎng)頁的用戶提供很好的用戶體驗。為了能創(chuàng)建一個成功的響應(yīng)式網(wǎng)頁，開發(fā)者需要使用一些方便實用的工具以提高效率。在本文中，將選取5款十分優(yōu)秀的在響應(yīng)式頁面設(shè)計中優(yōu)秀的工具，給大家作相關(guān)參考。

Responsive Data Table Roundup

Responsive Data Table Roundup (http://css-tricks.com/responsive-data-table-roundup/ )

是一款很優(yōu)秀的帶有樣例和代碼的幫助設(shè)計響應(yīng)式設(shè)計頁面的工具。它重點關(guān)注的是當(dāng)屏幕尺寸縮小的時候如表格是如何見減小的。根據(jù)數(shù)據(jù)表格內(nèi)容的不同，其實解決方案也是多樣的。如在窄小的屏幕中，則可以產(chǎn)生表格的一個小的縮略圖，然后當(dāng)用戶點這個縮略圖的時候，再在新的一屏中顯示整個表格，并且可以退回到縮略圖的狀態(tài)。

Zurb出品的Responsive Tables

由Zurb出品的Responsive Tables(http://www.zurb.com/playground/responsive-tables)是一個非常精簡的CSS/JS代碼庫,它能幫助開發(fā)者的響應(yīng)式網(wǎng)頁中設(shè)計大小不同的表格。這個工具最精彩之處在于能讓數(shù)據(jù)表格在尺寸小的屏幕中依然不走樣。該工具代碼包有一個樣例文件和兩個關(guān)鍵的文件分別為responsive-tables.js和responsive-tables.css。該工具庫的工作原理是固定***列的左側(cè)表，并允許用戶滾動在其之下的其他列。該工具庫支持iOS、Windows Phone 7、Chrome、Safari和Firefox。

Retina Images

Retina Images是一個設(shè)計為基于用戶的瀏覽設(shè)備能顯示不同尺寸圖片的響應(yīng)式網(wǎng)頁設(shè)計工具。該JavaScript解決方案能在支持retina的顯示設(shè)備中顯示比平時大兩倍的高分辨率圖。開發(fā)者只需要創(chuàng)建所有圖片的高分辨率圖就可以了，其他的工作都交由該工具去自動完成。該工具有可以把所有的標(biāo)準(zhǔn)柵格圖像（JPG、PNG、GIF、BMP）都轉(zhuǎn)換為高清晰度的圖片。當(dāng)圖片無法轉(zhuǎn)換為高分辨率圖或禁用Javascript、CSS或cookies后，則會自動轉(zhuǎn)回原來尺寸大小的圖片。

Seamless Responsive Photo Grid

[[77078]]

Seamless Responsive Photo Grid是一個有趣的工具，它可以在瀏覽器中無縫地顯示各種各樣的圖片（如上圖所示）。它適用于幾乎所有的主流瀏覽器，并能相當(dāng)容易地和任何響應(yīng)式網(wǎng)頁進(jìn)行整合。該工具使用的是使用CSS媒體查詢語言（media queries）去測試各個瀏覽器的寬度，會根據(jù)調(diào)用戶調(diào)整的瀏覽器窗口大小去調(diào)整列的數(shù)量。該工具支持的瀏覽器有IE10、火狐3.6+，Opera11.1+、Safari 4的+和Chrome10+。

Responsive Web Design Testing Tool

用戶可以使用Responsive Web Design Testing Tool（http://mattkersley.com/responsive/）這個測試工具去測試所設(shè)計的響應(yīng)式頁面的實際效果。所需要的只是在這個工具的url欄中輸入想測試的網(wǎng)站或網(wǎng)頁的地址就可以了。該工具會自動顯示所輸入網(wǎng)站的外觀，并且能看到對應(yīng)不同分辨率尺寸下的實際頁面效果，十分方便。

***總結(jié)下，要設(shè)計優(yōu)秀的響應(yīng)式網(wǎng)頁主要的是依靠設(shè)計師如何設(shè)計用戶界面。在設(shè)計響應(yīng)式頁面的過程中是會遇到不少的挑戰(zhàn)和困難，希望本文推薦的5款不同類型的工具能對設(shè)計者有所幫助。

 原文鏈接：http://www.bestdesigntuts.com/5-best-responsive-web-design-tools-for-designers