有些人喜欢设计 “移动优先”，其他人则同时设计，而另一些人则首先设计桌上型电脑，然后针对较小的萤幕进行调整。无论您的过程如何，都需要使用正确的工具来检查网站的响应速度。
这就是为什么我们将此列表与一些 zui 实用的响应式网站设计测试工具和网站放在一起的原因。试试看，看看 zui 适合哪一个。
1 、 Chrome 上的除错工具 (F12)
列表中第一个响应式测试工具就在您的 Chrome 浏览器中。您用来检查站点代码的同一工具还具有测试萤幕尺寸和视口的功能。右键单击任何网站，然后单击 “检查” 。检查视窗开启后，您将在名为 “元素” 的按钮旁边看到装置图示。当您单击装置按钮时，萤幕将显示您在不同断点处的网站。
您可以输入特定的大小，也可以简单地抓住并拖动视窗的一角来手动更改断点。这对于检查您的设计如何适应不同的视口非常有用。
2 、响应式测试工具
响应式测试工具就像大多数响应式测试网站一样，您可以在萤幕顶部的搜索栏中输入要测试的页面的 URL 。此特定工具有很长的预设装置大小列表供您选择。如果需要其他尺寸，可以选择自定义尺寸尺寸。当您要检查设计中的更改时，只需单击 “检查” 按钮即可重新载入。在测试视窗中有一个用于切换滚动功能的按钮，以及一个用于检查垂直和水平布局的 “旋转” 按钮。
该工具背后的开发人员还为响应式网站建立了一个网格系统。您会在右上角的灯泡图示中找到它。
3 、应式设计检查器
响应式设计检查器是一个具有许多预设萤幕尺寸和自定义尺寸选项的站点。与上面的工具相比，该工具缺少的是萤幕顶部的标尺和旋转按钮。共同之处在于，“开始” 按钮的工作方式相同，当您对设计进行了更改并想要检查结果时，只需单击它即可。
4 、设计模式
Design Modo 是一个网站和电子邮件构建器，其网站包含免费的响应式测试工具。该工具具有上述两个工具所具有的所有功能以及一个拖动按钮，以检视设计在视口收缩和扩充套件时如何变化。当然，它也可以作为其主要服务的广告和潜在客户生成装置。唯一的挫折是该工具显示的测量值是按解析度而不是视口显示的。这可能会造成一些混乱。
5 、萤幕飞
Screenfly 是另一个具有与上述示例相同的响应测试功能的网站，但是预设有些过时。 iPhone 的 zui 后一个预设是 7X 。尽管如此，该工具仍然可以正常工作，并具有自定义尺寸功能，旋转和重新整理按钮以及滚动切换。
6 、响应者
Responsinator 仍然是 zui 受欢迎的响应式 Web 设计测试应用程序之一，可能是因为它看起来很酷。新增 URL 时，它会在许多不同的移动装置中以垂直和水平布局显示网站。此工具可用于在 zui 常见的装置中进行快速检查，但是如果要检查所有断点，则此工具受到限制。
7 、我反应灵敏吗
我是否响应式与响应器相似，因为它在一定数量的装置中显示测试站点。该工具的好处是您可以截图结果并将其用于投资组合。而且，每个萤幕都可以独立滚动。
8 、画素调谐器
Pixeltuner 是一个类似于 Responsinator 的网站。该工具仅显示 6 种萤幕尺寸，但它们是不错的选择。有了这六个尺寸，您可以确定已经覆盖了所有基础。唯一缺少的是 1500 画素以上的大萤幕尺寸。
9 、响应式网页设计测试仪
响应式 Web 设计测试器不是网站，而是浏览器扩充套件。您可以在浏览器的扩充套件程序或附加库中找到它。以下连结适用于 Chrome 扩充套件程序，但该工具也适用于 Safari 和 Firefox 。当您点选扩充套件图示时，您可以从一系列预设中进行选择，然后该站点将以您选择的视口大小在新视窗中开启。预设有些过时，但是您可以新增新装置并建立自己的首选组。