ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网站运营 >> 建站经验 >> 分享一款在线预览响应式网页工具:.resizr

分享一款在线预览响应式网页工具:.resizr

来源:网络整理     时间:2015-04-23     关键词:

本篇文章主要介绍了"分享一款在线预览响应式网页工具:.resizr",主要涉及到方面的内容,对于建站经验感兴趣的同学可以参考一下: 在平常的工作中,响应式网页设计调试比一般的网页麻烦,之前设计达人小编介绍使用Chrome浏览器模拟手机端访问网页(见附文),效果不错,而今天再次为大家分享一个在...

在平常的工作中,响应式网页设计调试比一般的网页麻烦,之前设计达人小编介绍使用Chrome浏览器模拟手机端访问网页(见附文),效果不错,而今天再次为大家分享一个在线预览响应式网页工具:.resizr,下面来看看介绍。

网站名称:.resizr

网站地址:http://resizr.co/

超多设备预览

.resizr可以模拟多个种移动手持设备以及平面电脑,比如最新的iPhone6、6+、Amazon Kindle、Samsung手机、Asus Nexus、微软Surface等设备。

使用介绍:

首先输入要预览的网址,然后可以通过菜单来选择不同的设备预览。

Devices:用于来选择不同设备对网页预览; Portrait:横屏/竖屏 切换; Hide scrollbar / Show scrollbar:关闭或开启网页滚动。

下图为测试DR-II WordPress主题在iPhone 6显示的效果:

总结

.resizr 的界面友好,仅用于预览响应式网页是不错的,比如把这个网址发给客户,让客户去预览你的成果,是不是很方便呢?但如果用于开发测试,还是Chrome实用点,功能强大一些,模拟更真实一些。

附:使用Chrome浏览器模拟手机端访问网页jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播

设置方法:

STEP1: 首先确保你的Chrome在32以后版本。(小编是Chrome35版本)

STEP2: 按F12或(Ctrl+Shift+I)键来打开”开发者工具”,点击[Show drawer.]图标,如下图:

STEP3: 选择[Emulation]后再点击[Emulate]按钮即可。

除些之外,我们可以用Device来选择对应的机型进行测试,这里我们选择了iPhone 5,效果如下图,如果没有效果的刷新下网页就可以了。

以上就介绍了分享一款在线预览响应式网页工具:.resizr,包括了方面的内容,希望对建站经验有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_129214.html

相关图片

相关文章