15款测试html5响应式的在线工具

发布于 网站 2016-03-26 [ 1631 ] 次浏览

标签: 源码 互联网 网站建设 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工具,支持不同尺寸的展示。