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

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

ruisui885个月前 (01-10)技术分析38

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/158.html

标签: html5+
分享给朋友:

“15款测试html5响应式的在线工具” 的相关文章

迁移GIT仓库并带有历史提交记录

迁移git仓库开发在很多时候,会遇到一个问题。GIT仓库的管理,特别是仓库的迁移。我需要保留已有的历史记录,而不是重新开发,重头再来。我们可以这样做:使用--mirror模式会把本地的分支都克隆。// 先用--bare克隆裸仓库 git clone git@gitee.com:xxx/testApp...

再来一波黑科技工具,低调使用

静读天下静读天下是一个特别优秀的电子书阅读器。它上面有多个在线书库,像古登堡计划,很多种优秀的书杂志,都可以下载来阅读。它还能智能识别章节功能,还支持外置的语音阅读功能。它支持多种文本格式,比如说txt,pdf,epub,mobi等等。为了便于阅读它还有10 种配色方式,还有夜间模式。不过免费版有广...

分享15个基于Vue3.0全家桶的优秀开源项目

大家好,我是 Echa。今天来分享 15 个基于 Vue3.0 全家桶的优秀开源项目!1. Vue Admin Bettergithub : https://github.com/chuzhixin/vue-admin-bettervue admin better 对比其他来源 admin 框架有如...

uni-app开发微信小程序和h5应用

#头条创作挑战赛#本文同步本人掘金平台的文章:https://juejin.cn/post/6986465633114259469最近,有个需求需要开发H5应用和微信小程序。如果针对不同的平台开发自己的一套代码,那将是一件很糟糕的事情:如果下次需要兼容支付宝小程序、快应用,那工作量随着平台的添加而...

微信正开发“应用号”取代手机应用

长江商报消息用户只需关注公众号,不必下载APP就可获得相同体验本报讯(记者 陈妮希)昨日,2016微信公开课PRO版在广州举行,腾讯公司高级执行副总裁、微信事业群总裁张小龙首次公开演讲,并透露微信正在开发“应用号”,将应用和订阅号相结合。现场,微信团队还首次发布了腾讯生物识别标准“TENCENTSO...

第99p,用简单案例说明同步与异步的区别

大家好,我是杨数Tos,这是《从零基础到大神》系列课程的第99篇文章,第三阶段的课程:Python进阶知识:用一个简单的案例说明同步与异步之间的区别,以及异步的效率。异步的原理已经在前面的文章讲过,本文主要比较同步与异步的差异;使用一个模拟下载文件的案例,比较同步与异步在效率上的差异。1、使用同步的...