一、测试书签(bookmarks)

Viewport Resizer

这个书签号称拥有158个国家3万多活跃的用户,主要特性:

  • 完全自定制
  • 方便的添加自定义尺寸
  • 手动的横竖屏切换
  • 自动的横竖屏切换 (portrait | landscape)
  • 支持Media query
  • 自适应Meta的viewport设置
  • 手动重新加载页面
  • 移除页面工具栏
  • Viewport相关信息显示 (尺寸,分辨率,横纵屏,user agent)
  • 支持触摸设备
  • 支持vector

Resizer

这个在线书签允许你快速的修改页面的尺寸来测试响应式的设计. 并且支持Chrome的扩展!

Bricss

另外一个方便的测试响应式的书签,你可以自己指定自己的几套显示窗口的尺寸。

二、测试工具

Responsinator

这个工具提供了仿真的web界面来测试你的响应式设计,不过呢,只是界面外面套了一个设备的壳子图片,如果你想查看实际的设备展示情况,还是应该使用真实的设备。同时,提供了一个书签,你可以方便的添加到浏览器中。

ish

这个在线书签刚出来不久,特点是不指定你的界面尺寸,随机的帮助你生成界面,你可以看到你的设计在不同的窗口尺寸下的显示特点。

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本地方式测试你的应用或者网站。

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)

Jresizer

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

Resize My Browser

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

juicer

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

转载自:

  • http://www.qianduan.net/20-awesomes-responsive-design-tests-bookmark-application.html
  • http://www.gbin1.com/tools/design/20130108-responsive-design-bookmarks/

超棒的响应式设计测试书签和工具(bookmarks)(转)相关推荐

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

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

  2. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  3. 分享一个超棒的响应式幻灯jQuery插件 - refineslide

    在线演示  本地下载 jQuery的幻灯插件我们介绍过很多了,不过今天我们介绍的这个幻灯插件能够帮助我们使用响应式的方式展示图片幻灯,最重要的在于它支持很多超棒的CSS3幻灯过渡效果,能够帮助你创建超 ...

  4. web设计经验一 提升移动设备响应式设计的8个建议

    今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...

  5. 提升移动设备响应式设计的8个建议

    现在,对于任何种类的网站开发来说,响应式Web设计都不能再局限于纸上谈兵,其是开发阶段的一个关键步骤.作为设计师和开发人员,我们必须要了解有效响应式设计的重要性以及其在保证优秀终端用户体验方面的作用. ...

  6. 分享29个超赞的响应式Web设计

    原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...

  7. 这些响应式网页测试工具确保你的设计万无一失

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

  8. 响应式设计时代,我们该如何设计网站?

    摘要:随着各种屏幕尺寸设备的兴起以及交互方式的多样性,之前采用的网站设计方法已不再适用.我们需要更新设计方法,更新设计观念,更新设计工具.该文从分析Web发生了哪些变化入手,引出我们该采用的新的设计理 ...

  9. 响应式设计时代,我们该如何设计网站? 发表于2013-05-25 11:44| 13874次阅读| 来源Smashing Magazine| 38 条评论| 作者Vasilis van Gemert

    响应式设计时代,我们该如何设计网站? 发表于 2013-05-25 11:44|  13874次阅读| 来源 Smashing Magazine|  38 条评论| 作者 Vasilis van Ge ...

最新文章

  1. 人工智能这条小船何时才能变成航母?
  2. General-purpose and introductory examples for the scikit.
  3. redis基本命令list
  4. gzip+chunked页面分段输出,resin gzip trunked无效,页面数据写入自定义buffer
  5. boost::geometry::strategy::simplify::douglas_peucker用法的测试程序
  6. 同软件多个线程设置不同ip_软件测试如何自学?收下这份《2020千锋性能测试入门视频教程》...
  7. 电脑word在哪_到底哪个PDF转Word最好用?
  8. iOS中有两种支持机制:Notification和KVO(Key-Value Observing)
  9. ctd数据 matlab,基于auv的ctd数据处理方法
  10. [LeetCode]400. Nth Digit
  11. 企业管理中如何激励员工
  12. 敏感词检测理论算法过程
  13. python 矩阵连乘
  14. 计算机中丢失jadec.dll,技能干货丨超实用,Jade各种安装问题完美解决方案!
  15. VFP调用命令行图像处理程序,添加水印也在行
  16. vivo T2什么时候上市 vivo T2配置怎么样
  17. 50个js小项目-DAY1-expanding cards
  18. Rockchip Android平台GPU/DDR负载变频阈值调整方法
  19. 【Hadoop】谷歌的三篇论文(GFS、MapReduce分布式计算模型 、BigTable大表)
  20. python调用百度翻译api+离线语种检测

热门文章

  1. 小学生算术测试c语言报告,C语言课程设计报告小学算术运算测试.doc
  2. deepin linux 桌面环境,Linux Deepin 新桌面环境的目标
  3. vue中使用类似html中a标签的锚链接,实现点击定位到当前页面的某个位置
  4. ctfshow七夕杯
  5. java简单的输入输出代码,java输入输出代码 java怎么样实现字符串输入输出问题...
  6. ubuntu14.04使用ATI显卡,安装opencl并使用cgminer的方法(原创)
  7. 使用mybatis-plus批量插入遇到的两个问题记录
  8. 那些年啊,那些事——一个程序员的奋斗史 ——124
  9. 高通820A在5G时代来临的表现
  10. 大数据分析案例-基于随机森林模型对北京房价进行预测