当前位置:首页 > 技术文章 > 正文内容

15款测试html5响应式的在线工具(测试类h5)

zonemu2个月前 (07-09)技术文章24

手机、平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于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

相关文章

前端React面试基础系列(React基础篇)

本文阅读8分钟,喜欢的小伙伴可以持续关系小编哦1. 什么是受控组件和非受控组件?受控组件像表单元素在用户输入时,像<input> <select>等元素需要绑定一个 chang...

如何使用git clone克隆包含子模块的仓库

技术背景在软件开发中,当项目规模逐渐增大时,为了更好地管理代码,我们常常会使用子模块将项目拆分成多个独立的部分。Git 作为目前最流行的版本控制系统,提供了管理子模块的功能。但在克隆包含子模块的仓库时...

Hutool JSONUtil巧妙过滤null值:JSON转Map数据清洗的终极方案

Hutool JSONUtil巧妙过滤null值:JSON转Map数据清洗的终极解决方案声明本文中的所有案例代码、配置仅供参考,如需使用请严格做好相关测试及评估,对于因参照本文内容进行操作而导致的任何...

JavaScript中的数组(Array)方法你真的了解吗?

在过去的几个月,我发现我的拉取请求中存在四个完全相同的 JavaScript 错误。于是我写了这篇文章,总结了如何在 JavaScript 中正确使用地使用 Array 的方法!用 Array.inc...

不产生新的数组,删除数组里的重复元素

数组去重的方式有很多,我们可以使用 Set 去重、filter 过滤等,详见 携程&蘑菇街&bilibili:手写数组去重、扁平化函数 ,但三种解法(Set、filter、reduce...

73 “动态数组”用法详解(八) -选择行列CHOOSECOLS函数

今天继续分享动态数组专属函数系列行列数组函数系列之选择行列。选择行列这个函数原来没有发现他们的特殊之处,一直到有一天需要把常规公式更改为动态数组后,才发现这个函数的优秀之处。老规矩,还是看语法,再看案...