現(xiàn)在在網(wǎng)上，響應(yīng)式Web設(shè)計(jì)的工具和庫資源玲瓏滿目，應(yīng)有盡有。下面我將講一講其中最好的18個(gè)工具和庫。

1）Get Bootstrap

如果你想用HTML、CSS和JavaScript開發(fā)響應(yīng)式網(wǎng)頁，Bootstrap是最受網(wǎng)頁設(shè)計(jì)師和開發(fā)人員歡迎的框架。它適合所有技能水平的人，不管你的項(xiàng)目規(guī)模如何。

官方網(wǎng)站：http://getbootstrap.com/

2）Ink

Ink提供了一個(gè)響應(yīng)式的電子郵件框架，可以幫助你創(chuàng)建適用于任何設(shè)備、可在任何地方閱讀的響應(yīng)式HTML電子郵件。

官方網(wǎng)站：http://zurb.com/ink/

3）Susy

官方網(wǎng)站：http://susy.oddbird.net/

4）Simplegrid

在創(chuàng)建網(wǎng)站時(shí)，編寫支持網(wǎng)格的代碼是難點(diǎn)之一。這就是為什么SG盡可能地使用了最少的標(biāo)記和類以保持事情的簡(jiǎn)單明了。甚至是嵌套網(wǎng)格槽也不需要額外的類。

官方網(wǎng)站：http://simplegrid.info/

5）Furatto

Furatto既輕巧又簡(jiǎn)單易用，可用于前端程序設(shè)計(jì)和開發(fā)響應(yīng)式網(wǎng)頁。在小型設(shè)備上隱藏一些事情對(duì)于改善用戶體驗(yàn)是很重要的。Furatto提供類名來隱藏或顯示元素。

官方網(wǎng)站：http://icalialabs.github.io/furatto/

6）Lessframework

Lessframework是一款支持設(shè)計(jì)自適應(yīng)網(wǎng)站的CSS網(wǎng)格系統(tǒng)。它含有通通基于單網(wǎng)格的4款布局和3套預(yù)設(shè)排版。

官方網(wǎng)站：http://lessframework.com/

#p#

7）Getskeleton

如果你要做的只是一個(gè)小項(xiàng)目或者你覺得你并不需要大型的框架，那么不妨選擇Skeleton。Skeleton的標(biāo)準(zhǔn)HTML元素設(shè)計(jì)樣式屈指可數(shù)，網(wǎng)格也只有一個(gè)，不過這能讓我們更加輕松上手。

官方網(wǎng)站：http://getskeleton.com/

8）Restivejs

Restive.JS是一個(gè)jQuery插件，可以幫助我們輕松快捷地將功能添加至網(wǎng)站，使其能夠響應(yīng)和適應(yīng)幾乎所有的Web功能設(shè)備。

官方網(wǎng)站：http://restivejs.com/

9）Fittextjs

FitText能讓你靈活操作字體大小。

官方網(wǎng)站：http://fittextjs.com/

10）Onepage Scroll

這是一款能實(shí)現(xiàn)蘋果風(fēng)格的滾動(dòng)插件。

官方網(wǎng)站：http://www.thepetedesign.com/demos/onepage_scroll_demo.html

11）Glide

Glide是反應(yīng)靈敏、觸摸友好的jQuery滑塊。它簡(jiǎn)單，輕巧，快速。作為一個(gè)滑塊，它設(shè)計(jì)得恰到好處。

官方網(wǎng)站：http://glide.jedrzejchalubek.com/

#p#

12）ResponsiveSlides

ResponsiveSlides.js是一個(gè)很小的jQuery插件，用于創(chuàng)建在容器內(nèi)使用元素的響應(yīng)式滑塊。ResponsiveSLides.js適用于多種瀏覽器，包括IE6和6以上的所有版本。

官方網(wǎng)站：http://responsiveslides.com/

13）PhotoSwipe

PhotoSwipe是專為移動(dòng)觸摸設(shè)備設(shè)計(jì)的JavaScript畫廊，支持所有基本的手勢(shì)操作。

官方網(wǎng)站：http://photoswipe.com/

14）Magnific Popup

Magnific Popup是一款注重性能的響應(yīng)式lightbox和dialog腳本，在任何設(shè)備（支持jQuery和Zepto.js）上都能為用戶提供最佳體驗(yàn)。

官方網(wǎng)站：http://dimsemenov.com/plugins/magnific-popup/

15）Justified.js

Justified.js是一個(gè)用來為已有圖片創(chuàng)建自適應(yīng)圖片網(wǎng)格的JQuery插件。填充所有空余的地方！這樣，實(shí)際上是創(chuàng)造了一個(gè)包含不同尺寸圖片的優(yōu)雅畫冊(cè)，同一行的所有圖片都是同樣的高度。

官方網(wǎng)站：http://nitinhayaran.github.io/Justified.js/demo/index.html

16）Sidr

支持創(chuàng)建側(cè)菜單和用最簡(jiǎn)單的方法制作響應(yīng)式菜單的最佳jQuery插件。

官方網(wǎng)站：http://www.berriart.com/sidr/

17）BigSlide.js

bigSlide是一個(gè)極小極?。▔嚎s后大概1KB）的jQuery插件，用于創(chuàng)建脫屏滑蓋面板的導(dǎo)航。

官方網(wǎng)站：http://ascott1.github.io/bigSlide.js/

18）Am I Responsive Design

這個(gè)工具可以讓我們迅速得到所需要的內(nèi)容，并且它能幫助你更直觀地呈現(xiàn)給客戶你所描述的響應(yīng)式設(shè)計(jì)的內(nèi)涵，特別是當(dāng)這個(gè)產(chǎn)品還沒有準(zhǔn)備好的時(shí)候。

官方網(wǎng)站：http://ami.responsivedesign.is/

譯文鏈接：http://www.codeceo.com/article/18-best-web-design-tools.html
英文原文：18 Best Tools and Libraries for Responsive Web Designs