超棒的响应式设计测试书签和工具（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脚本 ...
随机推荐
- CUBRID学习笔记 6 修改用户密码
修改密码 可以在web管理中修改. 还有另外两种体位 1 语句 ALTER USER user_name PASSWORD 'any_password_here_in_single_quotes'; ...
- 检测服务器IP端口是否可用
private static double Scanner(string ip, int port) { try { System.Net.Sockets.TcpClient Tcp = new Sy ...
- hdu 5943 Kingdom of Obsession 二分图匹配+素数定理
Kingdom of Obsession Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- jquery.validate插件在booststarp中的运用
现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...
- iOS - OC NSCache 缓存
前言 NSCache 是苹果提供的一个专门用来做缓存的类,当内存 "不足" 或超过限制的时候,会自动清理缓存,使用时可以指定缓存的数量和成本.用法与 NSMutableDictio ...
- iOS - UIStepper
前言 NS_CLASS_AVAILABLE_IOS(5_0) __TVOS_PROHIBITED @interface UIStepper : UIControl @available(iOS 5.0 ...
- 07 SQL优化技术
本章提要------------------------------------------------------调优技术及什么时候使用------------------------------- ...
- 高处胜寒 php中奖概率算法，可用于刮刮卡，大转盘等抽奖算法
<?php /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为:array(100,200,300,400), * 开始是从1,1000 这个概率范围内筛选第一 ...
- .net ftp上传文件方法
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...
- GIT过滤
git 创建 .gitignore 文件 建立项目过滤规则 创建 .gitignore 随意设置想跟踪哪些文件 和不跟踪哪些文件. 1.在项目根目录下建立 .gitignore 文件 2. .gi ...