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

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

Responsive Data Table Roundup

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

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

Zurb出品的Responsive Tables

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

Retina Images

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

Seamless Responsive Photo Grid

[[77078]]

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

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

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