做设计不知道这个你就亏了!轻松验证响应式布局的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 -

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180501A1EDO200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励