起航学习网

- 让每个人都能学到最前沿新知识、新技能!
起航学习网
当前位置: 起航学习网 > 短期培训 > 设计培训 > 快速测试响应式网页设计的 Chrome 扩展

快速测试响应式网页设计的 Chrome 扩展

时间:2016-05-19 09:40:00来源:UI设计网 作者:起航学习网 已有: 名学员访问该课程

  快捷搜索:经验欣赏设计理论


机构名称:我爱学习网 联系手机:13783581536 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 网站域名:

前言: 测试响应式的网站可以有很多方式,比如使用之前我们介绍过的「使用Chrome浏览器模拟手机端访问网页」,又或者用

测试响应式的网站可以有很多方式,比如使用之前我们介绍过的「使用Chrome浏览器模拟手机端访问网页」,又或者用在线版的「Google Resizer」,然而今天为大家分享的是使用 Chrome 扩展版的 RWD 测试工具「Responsive Web Design Tester」测试效果也不错哦,下面来看看介绍。

快速测试响应式网页设计的 Chrome 扩展_qh.itpxw.cn

使用教程

下载 「Responsive Web Design Tester」Chrome 扩展,安装后,浏览器右上角会多出一个扩展图标,点击他就可以设置当前网站用什么样的设备来展示了,如下图:

快速测试响应式网页设计的 Chrome 扩展_qh.itpxw.cn

新增设备

此扩展默认有流行的移动设备,Apple、Android、平板等等已经很齐全了,然而你若想添加其它,可以通过设置该扩展了添加,并且支持添加用户代理(User-Agent)。

Step 1: 右击扩展图标,在弹出的菜单选择「选项」即要调出设置界面:

快速测试响应式网页设计的 Chrome 扩展_qh.itpxw.cn

Step 2: 点击「New Device」按钮,并设置对应的名称分辨率即可。

对于不懂添加User Agent 的可以随机添加,或复制其它选项的,又或者查看 User Agent List 这个列表来添加对应的用户代理。

快速测试响应式网页设计的 Chrome 扩展_qh.itpxw.cn

 RWD Tester Chrome 扩展特色

  • 以简洁的新窗口形式展示网页(无URL 地址栏、书签栏等干扰)
  • 方便快捷的查看方式(直接在浏览器右上角图标选择查看,也支持鼠标右键)
  • 可自定义分辨率

原文地址:responsivewebdesigntester

译文地址:设计达人

 

转载请注明:起航学习网 » 快速测试响应式网页设计的 Chrome 扩展

文章出自:http://qh.itpxw.cn/peixun/ui/201615497.html

文章标题:快速测试响应式网页设计的 Chrome 扩展



免责声明:本站文章均由入驻起航学习网的会员所发或者网络转载,所述观点仅代表作者本人,不代表起航学习网立场。如有侵权或者其他问题,请联系举报,必删。侵权投诉


机构名称:我爱学习网 联系手机:13783581536 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 网站域名:

(责任编辑:深圳学历教育网)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------