超棒的响应式设计测试书签和工具（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脚本 ...
随机推荐
- Apache-Shiro+Zookeeper系统集群安全解决方案之缓存管理
上篇[Apache-Shiro+Zookeeper系统集群安全解决方案之会话管理],解决了Shiro在系统集群开发时安全的会话共享问题,系统在使用过程中会有大量的权限检查和用户身份检验动作,为了不频繁 ...
- hdu 4828 Grids 卡特兰数+逆元
Grids Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) Problem D ...
- 解决使用jQuery采用append添加的元素事件无效的方法
<html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...
- 使用ultramon调整任务栏高度
取消锁定,调整任务栏的高度为一行图标的高度,然后再锁定即可.为啥程序没有默认设置?
- HttpClient的CircularRedirectException异常原因及解决办法
HttpClient的CircularRedirectException异常原因及解决办法 这两天在使用我自己爬虫抓取网页的时候总是出现 org.apache.http.client.ClientPr ...
- Linux vi 中移动光标 命令
移动光标 上:k nk:向上移动n行 9999k或gg可以移到第一行 G移到最后一行下:j nj:向下移动n行左:h nh:向左移动n列右:l nl:向右移动n列 w:光标以单词向前移动 nw:光标向 ...
- Oracle 中取当前日期的上个月最后天和第一天
前一月 最后一天select last_day(add_months(sysdate,-1)) from dual; 2010-2-28 9:23:01; select t ...
- bootstrap 手风琴效果
<!DOCTYPE HTML> <html><head><meta charset="utf-8"><title>按钮插 ...
- Android Menu菜单使用
如上图右上角,菜单选项的编辑,第一种代码实现方式如下: package com.example.menu; import android.os.Bundle; import android.app.A ...
- OpenWrt网络结构
原文链接:http://www.freezhongzi.info/?p=104 OpenWrt网络结构 OpenWrt的网络配置很丰富,在我看来几乎可以完成任何网络结构.下图为一个支持OpenWrt的 ...