响应式设计几乎是当代网页设计的基本构建块之一。在实际的设计开发过程中，设计师和前端需要花费大量时间进行测试和优化，使网站根据设计响应不同尺寸的屏幕。那么，今天我们收集了7款强大的响应式页面测试工具，下面我们就来一一介绍。1.XRESPOND这个叫做XRespond的工具自称是“虚拟设备实验室”，这个称号其实名副其实。通过Xrespond打开一个网页，你可以看到它在不同屏幕尺寸下的样子，整个布局是水平的，所以你需要水平滚动页面才能看到全部。屏幕顶部的标签将标识它与设备匹配的原因。在下拉框中，您可以选择不同品牌和型号的智能手机、平板和笔记本屏幕来预览效果。2、RESPONSINATOR和XRespond的功能类似，Responsinator也提供了不同屏幕尺寸下的预览效果。不过Responsinator的布局与前者不同，垂直滚动更符合日常的交互逻辑。您可以在Responsinator中看到最常用的移动设备，例如iPhone、iPad、Nexus系列，包括横向和纵向预览。Responsinator还支持在http链接和https之间切换，应用程序会根据你输入的链接自动识别和适配，并会避免SSL错误。3.RESPONSIVEDESIGNCHECKER快速检测一个网站是否响应式并不难，只需使用ResponsiveDesignChecker来检测，这个工具可以很方便的帮你定制屏幕尺寸和分辨率，做更深入的测试。您可以在边栏中找到Nexus平板电脑、Kindle或GooglePixel手机等设备的预定义屏幕尺寸/分辨率。你也可以在这里测试大屏幕尺寸，即使你在小屏幕上运行这个工具，它也可以达到同样的效果。目前ResponsiveDesignChecker支持最大24英寸的屏幕。4.GOOGLEMOBILETEST谷歌为站长和网络开发者提供了很多高质量的工具，GoogleMobileTest就是其中之一。该工具不是真正的预览工具，也不能帮助您准确判断UI中的错误。但它是一款超级实用的移动端工具，可以帮助你在移动设备上快速定位你网站的问题。一旦开始运行测试，测试结果必须以失败或成功结束。对于设计师来说，这个结果可能看起来很粗糙，但谷歌会找出需要改进的地方和元素，并提供改进的提示。这个工具可能不是一个完整的响应工具，但它是一个可靠的移动测试工具，也是收集和组织信息的好地方。5.MATTKERSLEY的响应式工具设计师和开发人员MattKersley发布了这个免费的响应式布局测试工具，它是众多测试工具中最简单的。虽然装饰不多，但是这个工具内置了5个固定宽度供测试，分别是240px、320px、480px、768px、1024px。预览界面有滚动条，可以用来浏览内容，但是不能点击内容，所以这个工具非常适合测试单个页面。6.我有反应吗？当然，如果你在测试页面的时候需要在测试过程中对页面的像素进行优化，那么就不要使用AmIResponsive这个工具了。相反，如果你的测试需要快速测试页面在几种常用设备上的显示效果，是一个不错的选择。同样输入链接生成预览，AmIResponsive可以帮助您测试页面在智能手机、平板电脑、笔记本电脑和桌面设备上的浏览体验。这个工具的亮点在于可以在截图的同时生成对应设备的外观，并匹配页面的大小比例。7.DESIGNMODORESPONSIVETEST这个工具叫DesignmodoResponsiveTest，是著名设计博客Designmodo推广的一款工具。它免费且易于使用。可以测试网页在特定宽度下的显示效果。这个工具最好的地方是它基于网格的页面设置。您可以使用此Web应用程序来测试网页的像素和页面的内置网格系统。除了使用预制的宽度进行测试外，还可以拖动调整宽度进行预览。
