前端设计师如何通过Responsive Viewer插件来调试响应式网站

作为网站设计师或者开发人员，经常遇到的情况就是需要一个CSS去适应各种分辨率的屏幕和各种移动桌面设备，传统的做法就是一个设备一个设备的调试，有冲突的地方就一个个处理，确实耗费非常多时间，经过寻找，小编给大家分享了一款Responsive Viewer的插件，可以同时在一个浏览器屏幕上调试多个设备，冲突点一目了然，前端开发者的必下插件，一起看下它的具体用法吧。

我们来看下这个插件的功能：

• 1、模拟多个移动PC设备进行网页打开
• 2、支持自定义添加各种新设备，支持User Agent模拟真实打开效果
• 3、支持横向纵向调试

插件下载

通过下面的页面下载本插件的最新版本，并提供的详细的安装

Responsive Viewer(前端响应式布局多屏调试工具)

1.1.15639K

本次给大家介绍的是一款适合前端响应式布局多屏调试工具：Responsive Viewer，它可以同时模拟多个设备，同时显示一个页面在多个设备显示的样子，同时调试，前端设计师朋友们下载尝试下吧。

直达下载

具体使用讲解

1、安装好插件以后，我们先把工具在浏览器右上方置顶显示，方便随时使用

2、打开一个自适应的网站，我们点击插件按钮就可以直接默认几个设备系统是打开了

3、我们从第一个按钮了解，模拟点击按钮，选中这个按钮后，我们就可以模拟鼠标或者触控来对每个模型下的网页进行点击、滑动等操作

4、多屏同时滚动按钮，点击后，无论显示在哪些设备上，都可以跟随随表一起滚动下滑查看

5、添加默认设备，还可以通过这个按钮调整显示顺序

6、下面是扩展功能，注意这里需要先登录插件网站才能继续使用

7、登录以后，这几个功能就可以用了，第一个就是区块选择管理，点击后，可以选择活动的框架，并可以把其余删除

8、移动端背景图片覆盖调整，可以在这里选择一个移动端的背景和遮罩图片，并对其基本的透明度，颜色等设置

9、网格用于确保页面元素之间的一致对齐

10、尺寸标尺

11、定位标尺

12、网页元素查看

13、单设备查看

14、按照屏幕尺寸换行

15、横屏显示

16、屏幕截图

17、添加设备样图框

​​​​​​​

以上就是我们在使用这个插件时候的最常用的主要功能，更多功能大家也可以慢慢尝试，希望我们整理的内容能够帮助到大家。