超棒的响应式设计测试书签和工具（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脚本 ...
随机推荐
- XAF应用开发教程(四)应用程序模型
XAF是重量型框架,确实够重量的,方方面面都做得规规矩矩. 如果看了前面三节,可能会认为,这N多的Attribute到底都是从哪里来的?到底有多少这样的Attribute?如果不够用了怎么办?等着官方 ...
- 16位的MD5加密和32位MD5加密的区别
16位的MD5加密和32位MD5加密的区别 MD5加密后所得到的通常是32位的编码,而在不少地方会用到16位的编码它们有什么区别呢?16位加密就是从32位MD5散列中把中间16位提取出来!其实破解16 ...
- Class.asSubclass浅谈
这是java.lang.Class中的一个方法,作用是将调用这个方法的class对象转换成由clazz参数所表示的class对象的某个子类.举例来说, 上面的代码将strList.getClass() ...
- NTT【51nod】1514 美妙的序列
题意:1~n 的全排列中,有多少个排列满足任意从中间切成两段后,左边段的最大值大于右边段的最小值? 例如:n为3时有3种 2 3 1 3 1 2 3 2 1 解释:比如 2 3 1 (2) (3 1) ...
- Nginx反向代理负载均衡
环境准备: 总共四台机器,两台装有Nginx的机器做负载均衡,两台机器装有Apache作为WEB服务器. 机器信息 hostname IP 说明 lb01 192.168.1.19 nginx主负载均 ...
- hdu 1081(最大子矩阵和)
题目很简单,就是个最大子矩阵和的裸题,看来算法课本的分析后也差不多会做了.利用最大子段和的O(n)算法,对矩阵的行(或列)进行 i和j的枚举,对于第 i到j行,把同一列的元素进行压缩,得到一整行的一维 ...
- 转：C/C++基本数据类型所占字节数
参考:http://blog.csdn.net/vast_sea/article/details/8076934 关于这个基本的问题,很早以前就很清楚了,C标准中并没有具体给出规定那个基本类型应该是多 ...
- Struts2的Action中如何操作作用域对象
得到作用域对象有三种方法,这里用代码来解释: package com.cy.action; import javax.servlet.ServletContext; import javax.serv ...
- html文本框(input)不保存缓存记录
有的时候js往文本框里赋值,结果在火狐中刷新后,刚才赋的值还在,导致好多麻烦的事情,现总结一下解决办法如下: <input name="bestlovesky" type= ...
- Hbase之进行批处理操作
import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; impo ...