16个帮助你高效测试响应式设计界面的工具

向右看齐 2022-04-14 02:39 280阅读 0赞

日期：2012-12-21  来源：[GBin1.com][]

[![16个帮助你高效测试响应式设计界面的工具][16]][16_16]

[响应式][Link 1]的设计现在越来越受设计师推崇，面对这越来越多的响应式设计页面，我们需要找到高效的测试工具来验证设计的合理和正确，在今天这篇文章中，我们将介绍16款帮助你在线测试[响应式][Link 1]页面设计的工具，希望大家喜欢！

相关阅读：

[分享一个帮助你在线测试响应式设计的web工具- Screenqueri.es][web_- Screenqueri.es]

[帮助你在不同尺寸屏幕下浏览网站效果的工具- Responsivator ][- Responsivator]

[分享一个在不同客户端查看网站的工具- Screenfly][- Screenfly]

## [Responsinator][] ##

Responsinator提供了大家在不同设备viewport下查看网站效果的特性，提供了iphone，android，ipad，kindle及其多种设备上的预览效果，你可以方便的看到需要支持的设备的响应式设计效果图。

![16个帮助你高效测试响应式设计界面的工具][16 1]

## [Responsivator][] ##

和responsinator不一样，responsivator提供了不同尺寸下的显示效果图

![16个帮助你高效测试响应式设计界面的工具][16 2]

## [Responsive.is][] ##

responsive提供了5种设备下的预览效果展示

![16个帮助你高效测试响应式设计界面的工具][16 3]

## [Responsive Web Design Testing Tool][] ##

类似responsivator，但是界面更简单

![16个帮助你高效测试响应式设计界面的工具][16 4]

## [Responsivepx][] ##

允许你用拖动的方式来修改窗口大小，模拟不同的设备屏幕

![16个帮助你高效测试响应式设计界面的工具][16 5]

## [screenqueri.es][] ##

这个工具在gbin1以前的文章中我们曾今介绍过，如果想更多了解请阅读 [分享一个帮助你在线测试响应式设计的web工具- Screenqueri.es][web_- Screenqueri.es]，最有意思的是它支持localhost本地方式测试你的应用或者网站。

![16个帮助你高效测试响应式设计界面的工具][16 6]

## [Aptus][] ##

一个工具类的浏览器，可以帮助你测试响应式设计

![16个帮助你高效测试响应式设计界面的工具][16 7]

## [Bricss][] ##

一个帮助你测试响应式的书签，你可以方便的整合到你的浏览器里

![16个帮助你高效测试响应式设计界面的工具][16 8]

## [Izilla Media Query Debugger][] ##

这个js可以帮助你添加伪元素到body元素上用来侦测宽高 ，当然你也可以使用他们提供的bookmark：[http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html][Izilla Media Query Debugger]

![16个帮助你高效测试响应式设计界面的工具][16 9]

## [Screenfly][] ##

支持4种设备的在线响应式设计测试工具，并且还提供相关开发的设计图和文档。具体请查看我们过去文章：[分享一个在不同客户端查看网站的工具- Screenfly][- Screenfly]

![16个帮助你高效测试响应式设计界面的工具][16 10]

## Firefox Developer Tools ##

如果你使用Firefox的话，你可以直接使用开发工具实现，快捷键（Ctrl + shift + M）

![16个帮助你高效测试响应式设计界面的工具][16 11]

## [ViewPort Resizer][] ##

另外一个书签式的工具

![16个帮助你高效测试响应式设计界面的工具][16 12]

## [Jresizer][] ##

一个jQuery的响应式开发工具插件，帮助你创建响应式的窗口，方便你的开发和设计流程

![16个帮助你高效测试响应式设计界面的工具][16 13]

## [Resize My Browser][] ##

一个简单的帮助你创建指定宽高新开窗口的web工具

![16个帮助你高效测试响应式设计界面的工具][16 14]

## [juicer][] ##

一个在线的展示响应式的工具，支持iphone，android等设备的显示，带有实物图。

![16个帮助你高效测试响应式设计界面的工具][16 15]

## [ish][] ##

一个比较新的在线查看响应式效果的web工具，支持不同尺寸的展示。

![16个帮助你高效测试响应式设计界面的工具][16 16]

以上就是16款我们收集的在线的和本地的响应式测试工具，相对来说，在线工具更适合和你的朋友或者同事分享，本地工具适合开发时调试，具体的使用请根据自己需要来选择，如果你也有相关的响应式测试工具，请到[gb标签社区][gb]与我们分享，希望大家喜欢！谢谢！

来源：[16个帮助你高效测试响应式设计界面的工具][GBin1.com]

[GBin1.com]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/
[16]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/title.jpg
[16_16]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/index.html
[Link 1]: http://www.gbin1.com/bloghome.html?tag=responsive
[web_- Screenqueri.es]: http://www.gbin1.com/technology/javautilities/20120423responsivetestingtool/
[- Responsivator]: http://www.gbin1.com/technology/javautilities/20121101-responsivator-view-websites-by-different-screen-size/
[- Screenfly]: http://www.gbin1.com/technology/html/20110726viewwebsitesonmultipledevicesscreenfly/
[Responsinator]: http://www.responsinator.com/?url=m.gbin1.com
[16 1]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/1.jpg
[Responsivator]: http://dfcb.github.com/Responsivator/?site=m.gbin1.com
[16 2]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/2.jpg
[Responsive.is]: http://responsive.is/m.gbin1.com
[16 3]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/3.jpg
[Responsive Web Design Testing Tool]: http://mattkersley.com/responsive/
[16 4]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/4.jpg
[Responsivepx]: http://responsivepx.com/?m.gbin1.com#1035x480&scrollbars
[16 5]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/5.jpg
[screenqueri.es]: http://screenqueri.es
[16 6]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/6.jpg
[Aptus]: https://itunes.apple.com/gb/app/aptus/id510487565?mt=12
[16 7]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/7.jpg
[Bricss]: http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/
[16 8]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/8.jpg
[Izilla Media Query Debugger]: http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
[16 9]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/9.jpg
[Screenfly]: http://quirktools.com/screenfly/
[16 10]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/10.jpg
[16 11]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/11.jpg
[ViewPort Resizer]: http://lab.maltewassermann.com/viewport-resizer/
[16 12]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/12.jpg
[Jresizer]: http://www.toddmotto.com/jresize-plugin-for-one-window-responsive-development
[16 13]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/13.jpg
[Resize My Browser]: http://resizemybrowser.com/
[16 14]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/14.jpg
[juicer]: http://juicecreative.co.uk/juicer/website/index.php?url=http%3A%2F%2Fm.gbin1.com&submit=recheck
[16 15]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/15.jpg
[ish]: http://bradfrostweb.com/demo/ish/?url=http%3A%2F%2Fm.gbin1.com
[16 16]: http://www.gbin1.com/tools/design/20121221-16-responsive-testing-tools/16.jpg
[gb]: http://www.gbin1.com/gb