16个高效测试响应式设计界面工具

 

响应式的设计现在越来越受设计师推崇,面对这越来越多的响应式设计页面,我们需要找到高效的测试工具来验证设计的合理和正确,在今天这篇文章中,我们将介绍16款帮助你在线测试响应式页面设计的工具,希望大家喜欢!


Responsinator


Responsinator提供了大家在不同设备viewport下查看网站效果的特性,提供了iphone,android,ipad,kindle及其多种设备上的预览效果,你可以方便的看到需要支持的设备的响应式设计效果图。


Responsivator


和responsinator不一样,responsivator提供了不同尺寸下的显示效果图


Responsive.is


responsive提供了5种设备下的预览效果展示


Responsive Web Design Testing Tool


类似responsivator,但是界面更简单


Responsivepx


允许你用拖动的方式来修改窗口大小,模拟不同的设备屏幕 


screenqueri.es


这个工具在gbin1以前的文章中我们曾今介绍过,如果想更多了解请阅读 分享一个帮助你在线测试响应式设计的web工具- Screenqueri.es,最有意思的是它支持localhost本地方式测试你的应用或者网站。


Aptus


一个工具类的浏览器,可以帮助你测试响应式设计 


Bricss


一个帮助你测试响应式的书签,你可以方便的整合到你的浏览器里


Izilla Media Query Debugger


这个js可以帮助你添加伪元素到body元素上用来侦测宽高 ,当然你也可以使用他们提供的bookmark:http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html


Screenfly


支持4种设备的在线响应式设计测试工具,并且还提供相关开发的设计图和文档。具体请查看我们过去文章:分享一个在不同客户端查看网站的工具- Screenfly


Firefox Developer Tools


如果你使用Firefox的话,你可以直接使用开发工具实现,快捷键(Ctrl + shift + M)


ViewPort Resizer


另外一个书签式的工具


Jresizer


一个jQuery的响应式开发工具插件,帮助你创建响应式的窗口,方便你的开发和设计流程


Resize My Browser


一个简单的帮助你创建指定宽高新开窗口的web工具 


juicer


一个在线的展示响应式的工具,支持iphone,android等设备的显示,带有实物图。


ish


一个比较新的在线查看响应式效果的web工具,支持不同尺寸的展示。

以上就是16款我们收集的在线的和本地的响应式测试工具,相对来说,在线工具更适合和你的朋友或者同事分享,本地工具适合开发时调试,具体的使用请根据自己需要来选择。希望你喜欢。

时间: 2024-10-06 13:02:33

16个高效测试响应式设计界面工具的相关文章

推荐15款响应式Web设计测试工具

响应式网页设计也称作自适应网页设计(通常缩写为RWD),该设计可使网站在多种浏览设备(从桌面计算机显示器到移动电话或其他移动产品设备)上阅读和导航,同时减少缩放.平移和滚动.换句话说,响应式网站能够自动响应终端用户行为.当市场上有新设备推出时,网站就无需再花时间去设计和开发了. 响应式旨在为各个网站在不同的设备上提供最佳的视觉体验,那么如何才能知道网站是否能够根据设备进行自动调整呢?这就得设计人员对网站的响应能力进行测试.本文就为大家介绍15款最佳的响应式网站测试工具,它们能帮助你检查网站的设计

AOP@Work: 用Contract4J进行组件设计-用契约式设计和AspectJ改进软件

简介:契约式设计(Design by Contract)是切实可行的技术,可以阐明组 件 设计的细节.为客户记录正确的组件用法,并用编程的方式测试组件使用的顺应 性(compliance).在 AOP@Work 的最后一篇中,Dean Wampler 介绍 了 Contract4J,这是契约式设计的工具,它用 Java 5 标注 (annotation)指定合约,并在运行时用 AspectJ 方面计算合约.在成为 AOP 工具包中新增的一个举足轻重的工具的同时,Contract4J 迎合了面向方

响应式web设计:WEBJX收集50个响应式设计工具

文章简介:在您开始着手响应式站点的搭建之前,如果能拥有强有力的开发工具会让您的世界另有一番风采.本文中Denise Javobs和Peter Gasston推荐了50种强大的工具来支持您建造响应式站点的过程. 在您开始着手响应式站点的搭建之前,如果能拥有强有力的开发工具会让您的世界另有一番风采.本文中Denise Javobs和Peter Gasston推荐了50种强大的工具来支持您建造响应式站点的过程. 在Ethan Marcotte的文章<响应式web设计>以及他的畅销书中最早首创介绍了建

响应式设计技巧:2个简单的FireFox网页开发工具

文章描述:Firefox 15 新增响应式设计辅助功能. Mozilla Firefox最近为Web开发者工具加入2个简单.但非常有用的辅助功能,以减少响应式设计的工作量:为多种显示器设计和编写网页界面(比如几种尺寸.比例和功能)提供接口. 1. Responsive模式 Responsive模式提供了多种常见的屏幕分辨率,开发者可以在横向或纵向的不同屏幕下模拟网页的表现.只需在Firefox菜单中选择"Responsive模式",并选择所需的屏幕大小和方向即可. 2. 快速查看元素属

WPF 设计3D 特效 没有辅助工具吗? 类似设计界面用Blend

问题描述 WPF 设计3D 特效 没有辅助工具吗? 类似设计界面用Blend RT WPF 设计3D 特效 没有辅助工具吗? 类似设计界面用Blend 解决方案 poss 和 zbush

免费且超实用的响应式网页测试工具

  响应式设计几乎是现代网站的标配,开发者搭建好网站之后若是要测试其响应式的变化效果,需要大量的测试设备来确保网页显示不会出问题,可是拿大量的实际设备来测试并不现实.在这种需求之下,催生了许多实用而可靠的响应式网站测试工具,这些工具当中绝大多数是免费的,让开发者从海量的测试设备中解脱出来.今天,我们从这些测试工具中,挑选出9款免费又实用的测试工具,造福网页设计师和开发者. 1. Responsive Design Bookmarklet   这是一款简单又高效的测试工具,当你需要测试某个网站的时

9款免费且超实用的响应式网页测试工具

  响应式设计几乎是现代网站的标配,开发者搭建好网站之后若是要测试其响应式的变化效果,需要大量的测试设备来确保网页显示不会出问题,可是拿大量的实际设备来测试并不现实.在这种需求之下,催生了许多实用而可靠的响应式网站 测试工具,这些工具当中绝大多数是免费的,让开发者从海量的测试设备中解脱出来.今天,我们从这些测试工具中,挑选出9款免费又实用的测试工具,造福网页设计 师和开发者. 1. Responsive Design Bookmarklet 这是一款简单又高效的测试工具,当你需要测试某个网站的时

如何提升移动站点的响应式设计?

现在,对于任何种类的网站开发来说,响应式Web设计都不能再局限于纸上谈兵,其是开发阶段的一个关键步骤.作为设计师和开发人员,我们必须要了解有效响应式设计的重要性以及其在保证优秀终端用户体验方面的作用. 随着web向着移动端逐步发展,现在响应能力对于网站来说已经必不可少.很多人没能在移动用户兴起时抓住时机进行顺应潮流,因此现在难以保证网站在移动设备上的体验流畅性. 我们必须承认,移动设备已经彻底改变了我们使用web的方式.2013年开展的一项调查显示,多达百分之73的用户会通过移动设备浏览网络,因

移动设备上的劝导式设计解剖: Banner不靠谱

本文围绕劝导式设计(persuasive design)而展开,介绍了移动终端上banner广告.push信息等典型的劝服失败案例,并从用户与移动设备之间的情感联系出发,探讨了移动劝导策略的几个切入点.所谓劝导式设计,是指通过说服和社会影响,而非通过强制的方式,以达到改变和引导用户态度或行为的技术.这种技术常被应用于销售.外交.政治.宗教.军事训练.公共卫生和管理等领域.近年来,大多数劝导式技术的研究主要集中在计算机交互领域,包括台式电脑.互联网服务.视屏游戏和移动设备.劝导技术可以看成是对用户