超棒的响应式设计测试书签和工具（bookmarks）(转)
一、测试书签（bookmarks）
这个书签号称拥有158个国家3万多活跃的用户，主要特性：
- 完全自定制
- 方便的添加自定义尺寸
- 手动的横竖屏切换
- 自动的横竖屏切换 (portrait | landscape)
- 支持Media query
- 自适应Meta的viewport设置
- 手动重新加载页面
- 移除页面工具栏
- Viewport相关信息显示 (尺寸，分辨率，横纵屏，user agent)
- 支持触摸设备
- 支持vector
这个在线书签允许你快速的修改页面的尺寸来测试响应式的设计. 并且支持Chrome的扩展！
另外一个方便的测试响应式的书签，你可以自己指定自己的几套显示窗口的尺寸。
二、测试工具
这个工具提供了仿真的web界面来测试你的响应式设计，不过呢，只是界面外面套了一个设备的壳子图片，如果你想查看实际的设备展示情况，还是应该使用真实的设备。同时，提供了一个书签，你可以方便的添加到浏览器中。
这个在线书签刚出来不久，特点是不指定你的界面尺寸，随机的帮助你生成界面，你可以看到你的设计在不同的窗口尺寸下的显示特点。
Responsinator提供了大家在不同设备viewport下查看网站效果的特性，提供了iphone，android，ipad，kindle及其多种设备上的预览效果，你可以方便的看到需要支持的设备的响应式设计效果图。
和responsinator不一样，responsivator提供了不同尺寸下的显示效果图
responsive提供了5种设备下的预览效果展示
Responsive Web Design Testing Tool
类似responsivator，但是界面更简单
允许你用拖动的方式来修改窗口大小，模拟不同的设备屏幕
这个工具在gbin1以前的文章中我们曾今介绍过，如果想更多了解请阅读 分享一个帮助你在线测试响应式设计的web工具- Screenqueri.es，最有意思的是它支持localhost本地方式测试你的应用或者网站。
这个js可以帮助你添加伪元素到body元素上用来侦测宽高 ，当然你也可以使用他们提供的bookmark：http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
支持4种设备的在线响应式设计测试工具，并且还提供相关开发的设计图和文档。具体请查看我们过去文章：分享一个在不同客户端查看网站的工具- Screenfly
Firefox Developer Tools
如果你使用Firefox的话，你可以直接使用开发工具实现，快捷键（Ctrl + shift + M）
一个jQuery的响应式开发工具插件，帮助你创建响应式的窗口，方便你的开发和设计流程
一个简单的帮助你创建指定宽高新开窗口的web工具
一个在线的展示响应式的工具，支持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）(转)的更多相关文章
- 另外一款超棒的响应式布局jQuery插件 – Freetile.js
在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...
- web设计经验<一> 提升移动设备响应式设计的8个建议
今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...
- 分享29个超赞的响应式Web设计
原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...
- Grid – 入门必备！简单易懂的响应式设计指南
如今,人们使用各种各样的移动设备访问网页,设计师们需要去适配不同的屏幕,让用户在都能有最佳的浏览体验.Grid 是一个简单的响应式设计指南,按照这些简单的步骤,你的就能够掌握基础的响应网页设计技巧. ...
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- FLASH CC 2015 CANVAS （四）制作响应式设计（自适应）的项目
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误(如果发现我会更新文章)! 正式教程会在后续开始更新 相信你在看了(第二节)(第三节)之后已经能够满足绝大多数的互动需求了.那么也 ...
- html5、css3及响应式设计入门
一.响应式设计的定义 将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,命名为响应式网页设计.真正的响应式设计方法不仅仅只是根据视口大小改变网页布局.相反,它是要从整体上颠覆我们 ...
- 响应式设计的思考:媒体查询(media query)
Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...
- 移动端和pc端，响应式设计布局
1.什么是响应式 Web 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示. 响应式 Web 设计只使用 HTML 和 CSS. 响应式 Web 设计不是一个程序或Javascript脚本 ...
随机推荐
- [SAP ABAP开发技术总结]日期函数
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Linux c 下使用getopt()函数
命令行参数解析函数 —— getopt() getopt()函数声明如下: #include <unistd.h> int getopt(int argc, char * const ar ...
- WPF GroupBox样式
来源:http://code.msdn.microsoft.com/WPF-GroupBox-Style-1d9df7c5/ 效果: XAML CODE: <Window xmlns=" ...
- iOS - Swift SQLite 数据库存储
前言 采用 SQLite 数据库来存储数据.SQLite 作为一中小型数据库,应用 iOS 中,跟前三种保存方式相比,相对比较复杂一些. 注意:写入数据库,字符串可以采用 char 方式,而从数据库中 ...
- iOS - Swift NSFileManage 文件管理
前言 public class NSFileManager : NSObject public class NSFileHandle : NSObject, NSSecureCoding NSFile ...
- POJ2676，HDU4069解决数独的两种实现：DFS、DLX
搜索实现:解决数独有两种思考策略,一种是枚举当前格能填的数字的种数,这里有一优化策略就是先搜索能填入种数小的格子:另一种是考虑处理某一行(列.宫)时,对于某一个没用过的数字,若该行(列.宫)只有一个可 ...
- Android最佳性能实践(三)——高性能编码优化
在前两篇文章当中,我们主要学习了Android内存方面的相关知识,包括如何合理地使用内存,以及当发生内存泄露时如何定位出问题的原因.那么关于内存的知识就讨论到这里,今天开始我们将学习一些性能编码优化的 ...
- spring中的Log4jConfigListener作用和webapp.root的设置
转:http://blog.sina.com.cn/s/blog_7bbf356c01016wld.html 使用spring中的Log4jConfigListener有如如下好处: 1. 动 ...
- 使用==比较String类型
String类型的比较 public class StringDemo { public static void main(String[] args) { String s1 = "abc ...
- 工作了3年的JAVA程序员应该具备什么技能？(zhuan)
http://www.500d.me/article/5441.html **************************************** 来源:五百丁 作者:LZ2016-03-18 ...