靈活的栅格和布局，響應式的圖片和智能(néng)的CSS媒體查詢，構成(chéng)了響應式網頁的主要特征。當用戶扔下沉重的筆記本電腦拿起(qǐ)平闆，響應式的網站能(néng)夠自然而然地随之适配，掏出手機也毫無壓力，圖片和文字都(dōu)會随著(zhe)特定的屏幕和分辨率而調整，這(zhè)就是它的優勢。你以爲這(zhè)就完了？當然不會！在未來，一摸兜裡(lǐ)手機忘帶了，擡起(qǐ)左手喚醒智能(néng)手表，打開(kāi)網頁，也能(néng)看！

　　不得不說，創建響應式網站越來越容易，即使你不是專業的前端也可以輕松搞得定。挑選合适的工具，搜幾個符合需求的jQuery插件，配合合理的設計，你也可以實現期待中的響應速度和對(duì)不同屏幕的兼容性。響應式網站的實現并不難，但是需要在對(duì)的地方、對(duì)的階段使用對(duì)的工具，這(zhè)也是今天這(zhè)篇文章的目的所在：爲你在不同的階段提供幫助。當然，畢竟不是所有人都(dōu)響應式網站到底是咋設計，咱們也曾發(fā)過(guò)相關的教程……如果這(zhè)其中有你特别想了解的教程，請在文章下方留言，罹患拖延症并身處晚期的譯者將(jiāng)會優先翻譯，謝謝了各位……

　　閑話少叙，咱先看看幹貨吧：

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

　　1. Wirefy

　　Wirefy 是一個了不起(qǐ)的線框圖/原型設計的應用，能(néng)爲設計師和開(kāi)發(fā)者提供極大的幫助。從草圖設計到最終交付，各個環節你都(dōu)能(néng)用上它。沿著(zhe)簡單的工作流，新的UI和交互設計能(néng)夠緊密地糅合到一起(qǐ)。

　　2. Hotgloo

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

　　3. 響應式線框圖

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

　　4. MockUPhone

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

　　5. Style Tiles

　　Style Tiles 是一個由字體、色彩和界面(miàn)元素組成(chéng)的網絡視覺品牌，它可以幫設計師和利益相關者生成(chéng)他們所需要的視覺語言，并最終交付給客戶。完成(chéng)線框圖和原型之後(hòu)，接下來就要開(kāi)始寫代碼了。不過(guò)要爲響應式網站寫CSS樣(yàng)式和包含大量分辨率顯示信息的媒體查詢并不是一個有趣的過(guò)程。所以，下面(miàn)這(zhè)些工具就該登場了。

　　6. Pure CSS

　　Pure CSS 是一組小型的響應式CSS模塊，可以應用于每個Web項目。這(zhè)個僅有5.7KB大小的壓縮包非常便于使用，制作的時候考慮過(guò)移動端的需求，與此同時，所有的CSS代碼都(dōu)經(jīng)過(guò)仔細斟酌，在确保功能(néng)的前提下盡量做到小巧而全面(miàn)。

　　7. Responsive Web CSS

　　這(zhè)也是一款一句Web的工具，僅需拖拽就可以生成(chéng)響應式布局。你可以方便地添加頁面(miàn)，方便地設定div和寬度等參數。這(zhè)一工具還(hái)支持嵌套栅格，并且能(néng)對(duì)特定設備進(jìn)行針對(duì)性的設計。

　　8. Responsive Tables

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

　　9. Type Rendering Mix

　　Type Rendering Mix 是一個小型的JS庫，當使用Core Text（iOS和OSX平台）的時候就可以調用它。Type Rendering Mix可以實現更爲一緻的渲染，同事(shì)确保子像素抗鋸齒的準确性。

　　10. Ink

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

　　11. Macaw

　　Macaw 能(néng)讓設計師在創建網站的時候更加便捷無礙。Macaw被(bèi)定位爲一個設計工具而非開(kāi)發(fā)工具，下載安裝之後(hòu)，你無需寫代碼，直接開(kāi)始設計就好(hǎo)了。響應式？留給客戶端來操心吧。

　　字體、圖片與視頻

　　當你的基本的代碼框架都(dōu)到位之後(hòu)，接下來就要上内容了。而處理内容的事(shì)情，就交給開(kāi)發(fā)者們精心準備的jQuery插件吧！

　　12. Pageres

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

　　13. Adaptive Images

　　Adaptive Images 可以自動檢測訪客的屏幕尺寸，自動适配并緩存結果，讓網頁的圖片尺寸調整之後(hòu)再輸出。

　　14. FitVids.js

　　在處理好(hǎo)圖片之後(hòu)，就是要讓視頻也能(néng)随著(zhe)網頁響應式調整了。這(zhè)個時候就要FitVids.js上場了。這(zhè)是一個輕量級的jQuery插件，可以讓視頻随著(zhe)屏幕尺寸而調整，并保持輸出的縱橫比。

　　15. Responsive Elements

　　Responsive Elements 能(néng)讓任何網頁元素都(dōu)随著(zhe)屏幕尺寸響應式變化，它本質上是一個JS庫，它能(néng)監測到屏幕的寬度，并讓網頁元素随之進(jìn)行調整适配。

　　16. Froont

　　Froont也是一個功能(néng)強大的在線平台，它旨在幫你加速網站原型設計和響應式布局。它是一款巧妙的協作工具，設計者可以通過(guò)鏈接同客戶分享他們的設計的原型。作爲設計者，用戶可以在Froont上精心打磨原型的細節，設置布局，色彩，樣(yàng)式，字體，讓項目的設計更上一層樓。Froont擁有友好(hǎo)的界面(miàn)，以及類似PS的直觀的圖層管理功能(néng)，它還(hái)可以從PS調用CSS樣(yàng)式，使用在線的SVG文件，可以複制項目、創建分支等等，非常方便。一旦完成(chéng)設計，可以一鍵下載，頗爲方便。以上列舉出的工具能(néng)幫你設計出響應式的網站，但是未經(jīng)測試就上線終究還(hái)是有點草率吧？接下來推薦一些實用的測試工具，幫你測試響應式網站可能(néng)存在的問題。

　　17. Viewport Resizer

　　Viewport Resizer 是一個基于浏覽器的工具，能(néng)幫你測試任何網站的響應問題。你隻需要將(jiāng)其保存書簽，然後(hòu)去需要測試的網站，點擊書簽就可以開(kāi)始測試了。

　　18. Responsive.IS

　　Responsive.Is 是TypeCast所開(kāi)發(fā)的響應式測試工具，令人印象頗爲深刻。測試方式也很簡單，輸入需要測試的網站的URL，Responsive.Is會根據你選擇的設備自動檢測。

　　19. Protofluid

　　Protofluid 簡化了動态布局、自适應CSS和響應式設計的測試過(guò)程，它構建了精準、動态的窗口幫你進(jìn)行測試。這(zhè)使得你可以快速高效地測試并展示設計成(chéng)功給利益相關方。整個程序是免費的。

　　20. Responsive Web Design Testing Tool

　　這(zhè)一響應式網站設計測試工具也非常不錯，可以幫你快速檢測網站的響應式設計的可靠性。