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

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

Responsive Data Table Roundup

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

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

Zurb出品的Responsive Tables

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

Retina Images

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

Seamless Responsive Photo Grid

[[77078]]

Seamless Responsive Photo Grid是一個(gè)有趣的工具，它可以在瀏覽器中無縫地顯示各種各樣的圖片（如上圖所示）。它適用于幾乎所有的主流瀏覽器，并能相當(dāng)容易地和任何響應(yīng)式網(wǎng)頁進(jìn)行整合。該工具使用的是使用CSS媒體查詢語言（media queries）去測試各個(gè)瀏覽器的寬度，會(huì)根據(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/）這個(gè)測試工具去測試所設(shè)計(jì)的響應(yīng)式頁面的實(shí)際效果。所需要的只是在這個(gè)工具的url欄中輸入想測試的網(wǎng)站或網(wǎng)頁的地址就可以了。該工具會(huì)自動(dòng)顯示所輸入網(wǎng)站的外觀，并且能看到對(duì)應(yīng)不同分辨率尺寸下的實(shí)際頁面效果，十分方便。

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

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