18個最好的響應式Web設計工具和庫

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

現在在網上，響應式Web設計的工具和庫資源玲瓏滿目，應有盡有。下面我將講一講其中最好的18個工具和庫。

1）Get Bootstrap

如果你想用HTML、CSS和JavaScript開發響應式網頁，Bootstrap是最受網頁設計師和開發人員歡迎的框架。它適合所有技能水平的人，不管你的專案規模如何。

官方網站：http://getbootstrap.com/

2）Ink

Ink提供了一個響應式的電子郵件框架，可以幫助你建立適用於任何裝置、可在任何地方閱讀的響應式HTML電子郵件。

官方網站：http://zurb.com/ink/

3）Susy

官方網站：http://susy.oddbird.net/

4）Simplegrid

在建立網站時，編寫支援網格的程式碼是難點之一。這就是為什麼SG儘可能地使用了最少的標記和類以保持事情的簡單明瞭。甚至是巢狀網格槽也不需要額外的類。

官方網站：http://simplegrid.info/

5）Furatto

Furatto既輕巧又簡單易用，可用於前端程式設計和開發響應式網頁。在小型裝置上隱藏一些事情對於改善使用者體驗是很重要的。Furatto提供類名來隱藏或顯示元素。

官方網站：http://icalialabs.github.io/furatto/

6）Lessframework

Lessframework是一款支援設計自適應網站的CSS網格系統。它含有通通基於單網格的4款佈局和3套預設排版。

官方網站：http://lessframework.com/

7）Getskeleton

如果你要做的只是一個小專案或者你覺得你並不需要大型的框架，那麼不妨選擇Skeleton。Skeleton的標準HTML元素設計樣式屈指可數，網格也只有一個，不過這能讓我們更加輕鬆上手。

官方網站：http://getskeleton.com/

8）Restivejs

Restive.JS是一個jQuery外掛，可以幫助我們輕鬆快捷地將功能新增至網站，使其能夠響應和適應幾乎所有的Web功能裝置。

官方網站：http://restivejs.com/

9）Fittextjs

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

官方網站：http://fittextjs.com/

10）Onepage Scroll

這是一款能實現蘋果風格的滾動外掛。

官方網站：http://www.thepetedesign.com/demos/onepage_scroll_demo.html

11）Glide

Glide是反應靈敏、觸控友好的jQuery滑塊。它簡單，輕巧，快速。作為一個滑塊，它設計得恰到好處。

官方網站：http://glide.jedrzejchalubek.com/

12）ResponsiveSlides

ResponsiveSlides.js是一個很小的jQuery外掛，用於建立在容器內使用元素的響應式滑塊。ResponsiveSLides.js適用於多種瀏覽器，包括IE6和6以上的所有版本。

官方網站：http://responsiveslides.com/

13）PhotoSwipe

PhotoSwipe是專為移動觸控裝置設計的JavaScript畫廊，支援所有基本的手勢操作。

官方網站：http://photoswipe.com/

14）Magnific Popup

Magnific Popup是一款注重效能的響應式lightbox和dialog指令碼，在任何裝置（支援jQuery和Zepto.js）上都能為使用者提供最佳體驗。

官方網站：http://dimsemenov.com/plugins/magnific-popup/

15）Justified.js

Justified.js是一個用來為已有圖片建立自適應圖片網格的JQuery外掛。填充所有空餘的地方！這樣，實際上是創造了一個包含不同尺寸圖片的優雅畫冊，同一行的所有圖片都是同樣的高度。

官方網站：http://nitinhayaran.github.io/Justified.js/demo/index.html

16）Sidr

支援建立側選單和用最簡單的方法制作響應式選單的最佳jQuery外掛。

官方網站：http://www.berriart.com/sidr/

17）BigSlide.js

bigSlide是一個極小極小（壓縮後大概1KB）的jQuery外掛，用於建立脫屏滑蓋皮膚的導航。

官方網站：http://ascott1.github.io/bigSlide.js/

18）Am I Responsive Design

這個工具可以讓我們迅速得到所需要的內容，並且它能幫助你更直觀地呈現給客戶你所描述的響應式設計的內涵，特別是當這個產品還沒有準備好的時候。

官方網站：http://ami.responsivedesign.is/