响应式设计几乎是当代网页设计的基础构成之一。在实际设计和开发的过程中，想要让网站按照设计响应不同尺寸萤幕，设计师和前端需要花费相当的时间来进行测试和优化。所以，今天我们搜集了 7 款功能强大的响应式页面测试工具，下面就一一介绍一下。

　　1.XRESPOND

　　这款名为 XRespond 的工具自称为 “虚拟装置实验室”，这个称号其实是名副其实的。

　　通过 Xrespond 开启网页，您可以看到它在不同萤幕尺寸下的样子，整个布局是横向的，所以您需要横向滚动页面才能看到它所有的样子。

　　萤幕上方的标签会标识出它是为什么装置所匹配的，在下拉框当中能够选出不同品牌不同型号的智慧手机、平板和笔记本萤幕，以预览效果。

　　2.RESPONSINATOR

　　和 XRespond 的功能相似，Responsinator 也提供了不同萤幕尺寸下的预览效果。不过，Responsinator 的布局和前者不同，纵向滚动更符合日常的互动逻辑。

　　您可以在 Responsinator 中看到常用的移动端装置，比如 iPhone 、 iPad 、 Nexus 系列，包含横屏和竖屏的预览。

　　Responsinator 还支持 http 连结和 https 之间的切换，应用会根据您输入的连结自动识别和适配，并且会避免 SSL 错误。

　　3.RESPONSIVE DESIGN CHECKER

　　想要快速检测一个网站是否是响应式的并不难，使用 Responsive Design Checker 来检测就好了，这款工具能够非常便捷地帮您自定义萤幕尺寸和解析度，来进行更深入的测试。

　　您可以在边栏中，找到预定义的装置的萤幕尺寸/解析度，比如 Nexus 平板电脑，Kindle 或者 Google Pixel 手机。

　　在这里同样可以对大屏尺寸进行测试，即使是在小萤幕上执行这一工具也同样可以达到效果。目前 Responsive Design Checker 支持大 24 英寸的萤幕。

　　4.GOOGLE MOBILE TEST

　　Google 为网站管理员和网页开发者提供了不少优质的工具，而 Google Mobile Test 也是其中之一。

　　这款工具不是真正意义上的预览工具，也不能帮您精确地判断 UI 中的错误。但是它是一款超级实用的移动端工具，它能帮您在移动装置上快速定位网站中的问题。

　　一旦开始执行测试，测试结果一定是以失败或者成功来结束的。对于设计师而言，这个结果可能看起来比较粗糙，但是 Google 会针对需要改进的区域和元素进行标识，并且提供改进的提示。

　　这个工具也许不少一个完整的响应式工具，但是它是非常可靠的移动端测试工具，并且是用来搜集和整理资讯的好地方。

　　5.MATT KERSLEY’S RESPONSIVE TOOL

　　设计师兼开发者 Matt Kersley 发布的这款免费的响应式布局测试工具，是诸多测试工具中朴素的一款。

　　虽然没有太多装饰，但是这款工具内建了 5 种固定的宽度用来测试，分别是 240px，320px，480px，768px，1024px 。

　　预览介面中有滚动条，可以借此来浏览其中内容，但是您不能点选其中的内容，所以这款工具极其适合测试单个页面。

　　6.AM I RESPONSIVE?

　　当然，如果您测试页面的时候，需要测试过程中页面画素的话，那么您还是不要用 Am I Responsive 这款工具了。

　　相反，如果您的测试需要快速测试页面在几款常见装置上的显示效果的话，倒是个不错的选择。

　　同样是输入连结生成预览，Am I Responsive 能帮您测试出页面在智慧手机、平板电脑、膝上型电脑和桌面端装置上的浏览体验。

　　这款工具的亮点在于，它能在截图的同时，生成对应装置的外观，和页面的尺寸比例进行匹配。

　　7.DESIGNMODO RESPONSIVE TEST

　　这款名为 Designmodo Responsive Test 的工具是着名的设计博客 Designmodo 所推的工具，免费，易用，可以针对特定的宽度来测试网页的显示效果。

　　这款工具大的优点是其中基于网格的页面设定。您可以使用这款网页应用来测试网页的画素点和页面内建的栅格系统。

　　除了使用预制的宽度来测试，您还可以自己拖动来调整宽度进行预览。