资讯频道 → Web前端
阅读更多

0顶
0踩

Web前端

原创新闻 16 个高效测试响应式设计界面的工具

2012-12-25 17:05 by 资深记者 jjfat 评论(0) 有6301人浏览
web 响应式 测试

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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

1.  Responsinator

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



2.  Responsivator

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



3.  Responsive.is

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



4.  Responsive Web Design Testing Tool

类似responsivator，但是界面更简单



5.  Responsivepx

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



6.  screenqueri.es

最有意思的是它支持localhost本地方式测试你的应用或者网站。



7.  Aptus

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



8.  Bricss

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



9.  Izilla Media Query Debugger

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



10.  Screenfly

支持4种设备的在线响应式设计测试工具，并且还提供相关开发的设计图和文档。



11.  Firefox Developer Tools

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



12.  ViewPort Resizer

另外一个书签式的工具



13.  Jresizer

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



14.  Resize My Browser

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



15.  juicer

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



16.  ish

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



以上就是16款我们收集的在线的和本地的响应式测试工具，相对来说，在线工具更适合和你的朋友或者同事分享，本地工具适合开发时调试，具体的使用请根据自己需要来选择，如果你也有相关的响应式测试工具，请与我们分享，希望大家喜欢！谢谢！
0
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

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

    响应式网页设计也称作自适应网页设计（通常缩写为RWD），该设计可使网站在多种浏览设备（从桌面计算机显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。换句话说，响应式网站能够自动...

  • 10个实用的响应式设计测试工具

    响应式的设计现在越来越受设计师推崇，面对这越来越多的响应式设计页面，我们需要找到高效的测试工具来验证设计的合理和正确，文中所介绍的工具可以帮助你测试响应式页面设计。 Viewport Resizer Viewport resizer...

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

    响应式设计几乎是现代网站的标配，开发者搭建好网站之后若是要测试其响应式的变化效果，需要大量的测试设备来确保网页显示不会出问题，可是拿大量的实际设备来测试并不现实。在这种需求之下，催生了许多实用而可靠的...

  • 测试老鸟常用的自动化测试工具有哪些？

    自动化测试正在逐步取代部分手动测试，因为它可以节省时间并...为了充分利用自动化，必须选择正确的自动化测试工具。 如果你想确保你的产品的质量，测试是一个关键的步骤。 测试你的应用程序以确保它们正常工作是

  • 数据产品化：如何构建一个高效的数据仓库自动化工具

    作者：禅与计算机程序设计艺术 在电商行业中，业务数据分析是一个复杂的过程，需要将多种维度、多种数据源的数据进行整合、清洗、转换、汇总后提供给业务决策者。这个过程称为“数据产品化”。构建数据产品化系统是...

  • JMeter压力测试

    即TPS：每秒事务数，性能测试中，最重要的2个指标之一。该插件的作用是在测试脚本执行过程中，监控查看服务器的TPS表现————比如整体趋势、实时平均值走向、稳定性等。jmeter本身的安装包中，监视器虽然提供了...

  • 软件测试工具大全

    2、Selenium（自动化测试） 3、Appium（自动化测试） 4、Cypress（自动化测试） 5、Robot Framework（自动化测试） 6、Airtest（自动化测试） 7、Macaca（自动化测试） 8、Katalon...

  • 2022年软件测试工具大全（自动化、接口、性能、安全、测试管理）

    根据 Tricentis 主导的一项全球调查为我们提供了几个有关测试趋势的重要观察。趋势表明，团队倾向于使用功能测试（自动化测试）。Functional Tests 功能测试 77%Coded tests 编码测试 67%Manual Testing 手动测试 50...

  • 猿创征文｜工具百宝箱-数据库连接工具-接口调试与测试工具-抓包工具

    1.猿如意-工具百宝箱 2.Edge-快速打开pdf文档 3.DBeaver-免费开源的数据库管理软件 ...7.Postman-接调试与测试工具 8.JMeter-压力测试工具 9.Apifox-API管理工具 10.Eolink-PI协作平台 11.Fidder-抓包工具

  • App界面原型设计工具

    首先，一款优秀的 移动APP界面原型设计工具应该具备： 　①.支持移动端演示(随时随地演示给BOSS，厕所&食堂&电梯…以体现我是那么的敬业——长点工资必备) 　②.组件库(高效复用，谁用谁知道) 　③.可以快速...

  • 工具推荐 10款用过都说好的移动界面原型设计工具

    首先，一款优秀的 移动APP界面原型设计工具应该具备： 　①.支持移动端演示(随时随地演示给BOSS，厕所&食堂&电梯…以体现我是那么的敬业——长点工资必备) 　②.组件库(高效复用，谁用谁知道) 　③.可以...

  • 2021年软件测试工具趋势

    文章目录1、前言2、Selenium（自动化测试）3、Appium（自动化测试）4、Cypress（自动化测试）5、Robot Framework（自动化...测试）12、Cucumber（BDD工具）13、SpecFlow（BDD工具）14、MantisBT（缺陷管理）15、Pract.

  • RPA设计实施、开发和单元测试

    RPA的设计、开发和单元测试是RPA项目实施的核心阶段。这个实施过程并非是遵循传统的瀑布式软件开发方法，而是遵循敏捷方法论，采用冲刺Sprint和迭代增量Scrum相结合的方法。Sprint指的是一次冲刺迭代，通常是以最快...

  • 基于springboot大学生就业信息管理系统源码数据库文档.zip

    基于springboot大学生就业信息管理系统源码数据库文档.zip

  • 基于java的驾校收支管理可视化平台的开题报告.docx

    基于java的驾校收支管理可视化平台的开题报告

  • 原木5秒数据20241120.7z

    时间序列 原木 间隔5秒钟 20241120

  • 毕业设计&课设_基于 Vue 的电影在线预订与管理系统：后台 Java（SSM）代码，为毕业设计项目.zip

    毕业设计&课设_基于 Vue 的电影在线预订与管理系统：后台 Java（SSM）代码，为毕业设计项目.zip

  • 基于springboot课件通中小学教学课件共享平台源码数据库文档.zip

    基于springboot课件通中小学教学课件共享平台源码数据库文档.zip

Global site tag (gtag.js) - Google Analytics