20款覆蓋全面的響應式網站設計工具

 　　靈活的柵格和布局，響應式的圖片和智能的CSS媒體查詢，構成了響應式網頁的主要特征。當用戶扔下沉重的筆記本電腦拿起平板，響應式的網站能夠自然而然地隨之適配，掏出手機也毫無壓力，圖片和文字都會隨著特定的屏幕和分辨率而調整，這就是它的優勢。你以為這就完了?當然不會!在未來，一摸兜裡手機忘帶了，抬起左手喚醒智能手表，打開網頁，也能看!

　　不得不說，創建響應式網站越來越容易，即使你不是專業的前端也可以輕松搞得定。挑選合適的工具，搜幾個符合需求的jQuery插件，配合合理的設計，你也可以實現期待中的響應速度和對不同屏幕的兼容性。

　　響應式網站的實現並不難，但是需要在對的地方、對的階段使用對的工具，這也是今天這篇文章的目的所在：為你在不同的階段提供幫助。當然，畢竟不是所有人都響應式網站到底是咋設計，咱們也曾發過相關的教程……如果這其中有你特別想了解的教程，請在文章下方留言，罹患拖延症並身處晚期的譯者將會優先翻譯，謝謝了各位……

　　閒話少敘，咱先看看干貨吧：

　　線框圖、原型、視覺稿工具

　　不得不說，在設計階段，線框圖和原型稿是繞不過去的。靠譜的線框圖和原型工具會讓你更加專注於交互和功能。以下的工具能幫你節省時間，為客戶和團隊設計出優秀的設計。

　　1. Wirefy

　　Wirefy 是一個了不起的線框圖/原型設計的應用，能為設計師和開發者提供極大的幫助。從草圖設計到最終交付，各個環節你都能用上它。沿著簡單的工作流，新的UI和交互設計能夠緊密地糅合到一起。

　　2. Hotgloo

　　HotGloo是另外一個值得推薦的原型/線框圖工具，你可以通過客戶端向你的客戶和同事共享你的設計稿的預覽圖，這也使得交流和反饋更加靈活便捷，無需代碼。HotGloo其中內置了50多款不同的UI組件和預制的UI庫。

　　3. 響應式線框圖

　　這款響應式線框圖工具是一款基於Web的免費設計工具，可以幫任何設計項目快速創建線框圖。其中可以插入各種元素，輕松調整風格、色彩、透明度，等等等等。這些視覺元素可以通過拖拽輕松布局，保持之後可以重復使用。這一工具專注於布局在不同的屏幕下的變化，也就是說，它是以響應式為核心。

　　4. MockUPhone

　　MockUPhone是一款免費的Web應用，幫你便捷地創建原型。你可以在設備列表中快速選取機型，通過拖拽各種元素快速生成原型。上傳你的設計之後，會生成不同角度的截圖，並提供下載。

　　5. Style Tiles

　　Style Tiles 是一個由字體、色彩和界面元素組成的網絡視覺品牌，它可以幫設計師和利益相關者生成他們所需要的視覺語言，並最終交付給客戶。

　　生成響應式HTML和CSS的工具

　　完成線框圖和原型之後，接下來就要開始寫代碼了。不過要為響應式網站寫CSS樣式和包含大量分辨率顯示信息的媒體查詢並不是一個有趣的過程。所以，下面這些工具就該登場了。

　　6. Pure CSS

　　Pure CSS 是一組小型的響應式CSS模塊，可以應用於每個Web項目。這個僅有5.7KB大小的壓縮包非常便於使用，制作的時候考慮過移動端的需求，與此同時，所有的CSS代碼都經過仔細斟酌，在確保功能的前提下盡量做到小巧而全面。

　　7. Responsive Web CSS

　　這也是一款一句Web的工具，僅需拖拽就可以生成響應式布局。你可以方便地添加頁面，方便地設定div和寬度等參數。這一工具還支持嵌套柵格，並且能對特定設備進行針對性的設計。

　　8. Responsive Tables

　　RWD Table Patterns是一套擁有復雜的數據響應式表格解決方案，它是基於Filament Group 的分支項目，基於移動端優先的設計思維來搭建，並在原有項目基礎上增加了許多新的特性。即使在不支持JS的浏覽器中，它也能使用。在正常情況下，你只需要增加一個JS文件，一個CSS文件以及一些基礎的設置之後就可以正常使用。

　　9. Type Rendering Mix

　　Type Rendering Mix 是一個小型的JS庫，當使用Core Text(iOS和OSX平台)的時候就可以調用它。Type Rendering Mix可以實現更為一致的渲染，同事確保子像素抗鋸齒的准確性。

　　10. Ink

　　Ink可以幫你快速創建響應式的HTML電子郵件，幫你為用戶推送可用性更高的電子郵件。Ink的CSS框架能極大地提高HTML郵件在各個終端上的可讀性。

　　11. Macaw

　　Macaw 能讓設計師在創建網站的時候更加便捷無礙。Macaw被定位為一個設計工具而非開發工具，下載安裝之後，你無需寫代碼，直接開始設計就好了。響應式?留給客戶端來操心吧。

　　字體、圖片與視頻

　　當你的基本的代碼框架都到位之後，接下來就要上內容了。而處理內容的事情，就交給開發者們精心准備的jQuery插件吧!

　　12. Pageres

　　Pageres 是一款命令行工具，用於生成網站不同分辨率截圖。Pageres專注於尺寸控制，所以稍加調整代碼就可以生成響應式網站的截圖。這款命令行工具可以一次設定多個參數，一次到位生成結果。

　　13. Adaptive Images

　　Adaptive Images 可以自動檢測訪客的屏幕尺寸，自動適配並緩存結果，讓網頁的圖片尺寸調整之後再輸出。

　　14. FitVids.js

　　在處理好圖片之後，就是要讓視頻也能隨著網頁響應式調整了。這個時候就要FitVids.js上場了。這是一個輕量級的jQuery插件，可以讓視頻隨著屏幕尺寸而調整，並保持輸出的縱橫比。

　　15. Responsive Elements

　　Responsive Elements 能讓任何網頁元素都隨著屏幕尺寸響應式變化，它本質上是一個JS庫，它能監測到屏幕的寬度，並讓網頁元素隨之進行調整適配。

　　16. Froont

　　Froont也是一個功能強大的在線平台，它旨在幫你加速網站原型設計和響應式布局。它是一款巧妙的協作工具，設計者可以通過鏈接同客戶分享他們的設計的原型。作為設計者，用戶可以在Froont上精心打磨原型的細節，設置布局，色彩，樣式，字體，讓項目的設計更上一層樓。Froont擁有友好的界面，以及類似PS的直觀的圖層管理功能，它還可以從PS調用CSS樣式，使用在線的SVG文件，可以復制項目、創建分支等等，非常方便。一旦完成設計，可以一鍵下載，頗為方便。

　　響應式設計測試工具

　　以上列舉出的工具能幫你設計出響應式的網站，但是未經測試就上線終究還是有點草率吧?接下來推薦一些實用的測試工具，幫你測試響應式網站可能存在的問題。

　　17. Viewport Resizer