推荐15款最佳的响应式 Web 设计测试工具

响应式网页设计是根据设备的屏幕尺寸，平台和方向来开发的网页，是一种对最终用户的行为和环境作出反应的方法。
响应式设计使用灵活的网格和布局，图像和智能使用 CSS 媒体查询的组合。当从它们在不同设备使用的时候，网站能够自动切换到容纳该特定分辨率，图像尺寸和脚本的能力。

1、ProtoFluid 4
ProtoFluid简化了流体布局，适应性CSS和响应式设计的开发。它构建精确的动态视口来测试你的工作。这样您就可以快速地进行变更并向利益相关方展示利益。它是免费的，并允许您使用其他扩展名，如FireBug。

2、Viewport Resizer
Viewport resizer是一种基于浏览器的工具来测试任何网站的响应。只需保存书签，转到要测试的页面，点击您创建的书签页，然后检查页面的各种屏幕分辨率。与您的团队和客户端直接共享您定义的设备和断点环境的最佳方式。但是，这个bookmarklet不应该替代真实的设备模拟。它可以帮助您，您的团队和客户端测试状态，转换，文本长度等在不同的设备类型。

3、Responsive.IS
Responsive.Is是由TypeCast开发的另一个令人印象深刻的响应式设计测试工具，您可以使用它来测试您的敏感设计。只需输入一个URL，它将根据您选择的设备自动更改其大小。

4、Respondr
Respondr是一个轻量级，非常有用和便利的工具，可让您在不同的设备上测试您的网站。您需要输入要测试的站点/页面的URL，然后选择所需的设备。您可以选择iPhone，iPad或桌面。

5、Froont
FROONT是一种基于网络的设计工具，可在浏览器中运行，并使各种视觉设计人员能够访问响应式的网页设计，即使是那些没有编码技能的视觉设计者。
FROONT使网页设计的反应灵敏。可以使用直观的拖放工具在浏览器中完成设计。毕竟，人们用他们的眼睛来判断设计，所以看到设计会跨越所有不同的屏幕尺寸看起来似乎是正常的。每个项目都有自己的URL，可以轻松地在实际设备上立即测试设计。

6、Responsivepx
使用响应窗口，您需要输入您的站点的网址 - 本地或在线：两者都可以使用 - 并使用控件来调整视口的宽度和高度，以查找精确的断点宽度（以像素为单位）。然后在媒体查询中使用该信息来创建响应式设计。

7、Responsive Web Design Testing Tool
响应式网页设计测试工具已经构建，可帮助您在设计和构建响应式网站时进行测试。

8、Screenfly
Screenfly允许您输入要测试的URL，然后选择手机，平板电脑，桌面设备或电视机。您还可以输入自定义屏幕尺寸，旋转屏幕，并生成一个URL以与其他人共享测试。

9、Review.js
ReView是一种动态视口系统，可提供高效的响应式网页设计查看选项。根据核心（移动）第一次逐步增强的原则，以纯JavaScript开发。该系统提供初始的“选择加入”和“选择退出”响应设计状态。

10、 Responsinator
响应者帮助网站制作人员快速了解自己的敏感网站将如何在最流行的设备上显示。Responsivator允许您测试您的Web应用程序iphone和ipad，kindle和Android平台。它还以纵向和横向模式显示您的网站。

11、Resizemybrowser
resizeMyBrowser允许您选择浏览器的尺寸进行测试。您可以选择15种不同的预设，或者您可以输入自己的自定义屏幕尺寸。

12、Responsive Design Bookmarklet
这是一个简单的响应式设计测试工具，您需要将bookmarklet拖放到书签栏上方，并将其应用于浏览器中。然后，您可以选择在屏幕宽度上预览平板电脑和智能手机的大小的当前页面。

13、Adobe Edge Inspect CC
Adobe Edge可让您预览和检查设备上的网页设计。

14、 I am mobile
我是移动设备是另一个很好的响应式设计测试工具，可以在各种视口上测试您的网站，并为您提供一些技巧，使您的网站更易于移动。

15、Retina Images
Retina图像根据观看者使用的设备提供不同的图像。
一旦设置在您的网站（非常简单！），您只需创建一个高分辨率版本的每个图像，您希望为视网膜屏幕优化，所有的工作都为您完成。您甚至不需要更改任何img标签（提供高度或宽度）。