做设计不知道这个你就亏了！轻松验证响应式布局的8个工具

在网页设计中，对于应用每种屏幕尺寸的响应式布局是不可或缺的。尽管在桌面上似乎没有问题，但从移动终端浏览时通常会发现很多问题。

这一次，我们将推荐几款在线测试工具，可以轻松验证响应式设计。使用这些工具，您可以同时检查每种屏幕尺寸的布局，以及网络制作正在进行的所有事情。

1、XRespond

http://app.xrespond.com

一个在线工具，可以通过简单设置您选择的屏幕大小并输入网站的URL来检查布局。您也可以从下拉菜单中指定特定的终端大小，以及多种选择。

2、Responsinator

https://www.responsinator.com

Responsinator也被推荐为类似于上述工具的工具。在这里，您可以在滚动每个设备的同时检查布局，兼容的终端也可以通过纵向以及iPhone和Android等进行检查。

3、Responsive Design Checker

http://responsivedesignchecker.com

当您想要快速确认具有特定屏幕尺寸的响应式布局时，只需输入网址，您可以在调整的同时检查网站的高度、宽度和高度。对于在小型MacBook屏幕上检查较宽尺寸（如1920px）的用户，建议使用此功能。

4、Google Mobile Test

https://search.google.com/test/mobile-friendly

Google为网页开发者发布了许多有用的工具，Google Mobile Test就是其中之一。虽然这个工具无法预览或修复UI错误，但它会在移动终端上查明问题。

当您输入网址时，您可以判断该网站是否适合移动设备，并且您可以通过一次性检查来检查需要修改的部分。

5、Matt Kersley’s Responsive Tool

http://mattkersley.com/responsive/

由设计师和开发人员Matt Kersley发布的响应式布局验证免费工具。与其他工具相比，它更简单，您可以预览移动设备，平板电脑，桌面设备等。

但是，由于预览中的链接无法单击，因此仅在需要通过页面进行布局验证时才使用此工具。

6、Am I Responsive?

只需输入网址，即可查看多个屏幕的屏幕尺寸，您可以立即保存屏幕截图。

7、Designmodo Resoponsive Test

https://designmodo.com/responsive-test/

由DesignModo Responsive Web Design Tester创建的设计验证工具，可以根据浏览器的大小检查网站预览。

这个工具的优点是你可以在网格基础上验证页面。通过点击导航菜单中显示的图标，也可以使用各种终端的屏幕尺寸进行预览确认。

8、Responsive Screenshot

https://responsive-screenshots.com

只需输入网址，即可通过Web服务拍摄并保存您在智能手机、平板电脑、笔记本电脑及台式机上浏览的状态截图。

您的点赞和转发

是对我们最大的鼓励

- End -