15款测试html5响应式的在线工具
手机、平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于html5+css3技术,目前越来越多的网站开始采用了响应式设计,而下面15款工具可以方便测试你的html5响应式效果。
Responsinator
http://www.responsinator.com/
Responsinator提供了大家在不同设备viewport下查看网站效果的特性,提供了iphone,android,ipad,kindle及其多种设备上的预览效果,你可以方便的看到需要支持的设备的响应式设计效果图。
Responsive.is
http://responsive.is/
responsive提供了5种设备下的预览效果展示
Kuapingce
http://www.kuapingce.com/
跨屏测 取自“跨屏”+“评测”,结合在一起取名 跨屏测,网址是跨屏测的拼音 ,创建于2015年12月。它是国内首个致力于跨屏幕响应式测试的工具类的产品,目的是为了帮助你查看你的网站的跨屏幕(响应式)效果,跨屏测收集了主流屏幕的尺寸大小,方便你快速了解网站在不同设备下的样子。
Responsive Web Design Testing Tool
http://mattkersley.com/responsive/
类似responsivator,但是界面更简单
Responsivepx
http://responsivepx.com/?m.gbin1.com#1035x480&scrollbars
允许你用拖动的方式来修改窗口大小,模拟不同的设备屏幕
screenqueri.es
http://screenqueri.es/
它支持localhost本地方式测试你的应用或者网站。
Aptus
https://itunes.apple.com/gb/app/aptus/id510487565?mt=12
一个工具类的浏览器,可以帮助你测试响应式设计
Bricss
http://www.benjaminkeen.com/open ... design-bookmarklet/
一个帮助你测试响应式的书签,你可以方便的整合到你的浏览器里
Izilla Media Query Debugger
http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
这个js可以帮助你添加伪元素到body元素上用来侦测宽高 ,当然你也可以使用他们提供的bookmark:http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
Screenfly
http://quirktools.com/screenfly/
支持4种设备的在线响应式设计测试工具,并且还提供相关开发的设计图和文档。
ViewPort Resizer
http://lab.maltewassermann.com/viewport-resizer/
另外一个书签式的工具
Jresizer
http://www.toddmotto.com/jresize ... ponsive-development
一个jQuery的响应式开发工具插件,帮助你创建响应式的窗口,方便你的开发和设计流程
Resize My Browser
http://resizemybrowser.com/
一个简单的帮助你创建指定宽高新开窗口的web工具
juicer
http://juicecreative.co.uk/juicer/website/index.php
一个在线的展示响应式的工具,支持iphone,android等设备的显示,带有实物图。
ish
http://bradfrostweb.com/demo/ish/
一个比较新的在线查看响应式效果的web工具,支持不同尺寸的展示。
原文地址:http://bbs.qietu.cn/forum.php?mod=viewthread&tid=15059