响应式web设计视图工具及插件总结----20150113

响应式web设计可以说火不火是迟早的，下面就对于最开始的视口调试的方法汇总，希望有好的方法大家一起交流。

1.火狐：
从Firefox升级到29.0之后就不直接支持Firesizer了。

先安装Add-on，然后就能使用Firesizer。

Add-on的下载地址是https://addons.mozilla.org/en-US/firefox/addon/the-addon-bar/

然后右下角就可以调试屏幕大小了。

补充url-addon-bar插件于---20150430

近阶段试了下，发现在右下角总是启动失败，找不到这个插件，然后加入了url-addon-bar插件，在地址栏出现了。

效果图：右击就可以调试了。

提示：本人安装的35.0.1，在菜单下面的开发者选项中有响应式设计视图，这个其实和插件的功能是类似的。

2.谷歌：
1.进入扩展程序界面：菜单->更多工具->扩展程序
2.将下载好的Window_Resizer_1.1.crx文件直接拖入扩展界面，然后则可以安装。
3.或者在此地址下下载
http://chrome.ionut-botizan.net/window-resizer/
然后crx文件可直接安装，zip离线包需要解压然后把解压的文件拖到扩展中心界面

补充：
http://blog.csdn.net/matraxa/article/details/39836159

3.IE
通过插件IEDevToolBarSetup来实现，在工具里面，重新调整大小，既可以对屏幕大小进行调整。

4.safari

Resize收费就没搞，地址http://resizesafari.com/
resizeme虽然免费，下载居然还要注册，太麻烦就不搞了。

5.通用解决法A：

第三方软件 Sizer | Window Resizer

5.1 Sizer的下载地址
http://www.brianapps.net/sizer/
使用：1.在之前设置好需要的视口大小，然后确认之后则隐藏在后台。
2.测试了三个浏览器，在Firefox和Google上可用，360不可用。右击最上方的空白处，则可看到扩展的插件。

5.2 Window Resizer下载地址（这个软件是德语的，不过界面简单，相信你研究一下就能上手）
http://www.joerg-rosenthal.com/en/resize/download.html

这两款软件均可以帮助你将你指定的浏览器窗口设定到你需要的大小。

6.
http://benfrain.com/easily-display-the-viewport-size-of-your-page-for-responsive-designs/

 

最后添加上资源链接：http://yunpan.cn/cKaJh5diLJ9Ev  访问密码 4dba

 

补充：在网页查看的时候经常遇到需要调试编码，比较习惯360的右键扩展。

firefox有个插件：right encoding