隨著市場需求的不斷增長，熱門技術與趨勢在不斷發生著變化和發展。在今天，web應用程序已經廣泛應用于日常生活中，人們可通過臺式電腦、手提電腦以及手機等各種設備訪問web應用程序。為了使web應用程序能夠兼容每種設備，創建響應式的web設計是很有必要的。下面將介紹幾種有用的響應式web設計工具，它們能夠幫助你解決網站在面對不同設備時所出現的頁面響應問題。

響應式網站的特征：

• 在任何設備上都能夠呈現出高分辨率；
• 可根據屏幕大小調節web頁面的尺寸；
• 用戶可以很容易進行頁面切換；
• 功能全面；
• 圖片及頁面加載速度快；
• 界面好看

如果你想要精確了解哪塊內容需要呈現在頁面上以及了解每塊內容的呈現優先級，content priority guide無疑是一個非常有用的工具。它支持對內容模型的挖掘，使你能夠盡早考慮CMS的問題。另外如果你在CMS中使用名字相同的內容元素，設置這一步將會節約很多時間。

Pattern Lab可以讓你的UI模型像俄羅斯套娃那樣，對其中的某個樣式進行改變，就會看到所有與該樣式相關的所有地方發生相應的改變。

Sketch是為現代平面設計師量身訂制的，它能夠展示應用程序上的每一個細節。它擁有支持多個頁面和畫板的靈活工作流，對不同符號和共享模式支持的強大特性使得元素的重用變得快速而簡單。

SASS是世界上最成熟、穩定和強大的專業級CSS擴展語言。

這是一個開源的github項目。在postcss中，使用Can I Use中的值可以將vendor prefixes（瀏覽器引擎前綴)添加到CSS規則，Autoprefixer將會基于當前瀏覽器流行度和性能的數據，為你篩選需要的前綴。而通過cssnext你可以使用到最新的CSS語法，它能夠將CSS參數轉變成與當前技術更兼容的代碼，所以你無需擔心瀏覽器支持的問題。

Chrome Developer Tools（簡稱DevTools），是Google Chrome內置的一組用于網頁編輯和調試的工具。DevTools可提供給web開發人員深入訪問瀏覽器和web應用程序的能力。使用DevTools可有效追蹤布局問題，通過設置JavaScript斷點，可獲得代碼優化的更多建議。

測試的時間會隨著頁面、設備和瀏覽器的增多而呈指數增長。曾經我們每改一次的代碼，都需要手動去刷新一次頁面，查看我們的改動是否正確；BrowserSync的出現減少了重復的手工任務。它就像一雙額外的手，幫助你完成從UI、命令行到個性化測試環境的一整套同步設置。你還需要更多的控件么？這沒問題！Browsersync能夠輕松地與你的web平臺、構建工具UI以及其它Node.js項目集成。

Skitch是可用于Mac, iPad和iPhone的本地化應用程序（對于非Mac系統的用戶非常抱歉），它使得抓取截圖和對圖片進行注釋變得非常簡單。它是由Evernote團隊的人創建的，但是不用擔心，即使你不是Evernote的用戶，你同樣可以使用它。

這個項目主要用于新元素與響應式圖片srcset在一起的時候的尺寸問題。另外讓我們備受期待的是，接下來，這個項目將會著手解決元素查詢的問題。

本文翻譯自