Seesponsive

Seesponsive插件简介

Seesponsive插件描述

INTRODUCTION

Seesponsive is a simple Google Chrome extension that allows you to see how a websites layout  design adjust responsively as the available screen width changes. It also lets you see the media queries that are being progressively matched  unmatched, driving these changes.

USAGE

To use the extension, just browse to a website that uses media queries. Then click the extensions action button in the toolbar. After a few seconds a black action bar will appear at the top of the page with two buttons  Shrink  Grow.

Clicking these will shrink  grow the width of the website to simulate the device width changing. As this occurs the action bar will indicate which media queries are being matched/unmatched at a particular width.

To see some examples of sites that use media queries to adapt responsively visit Media Queries (http://mediaqueri.es/).

Note: The Media Queries website is not in anyway affiliated with, n does it endse this extension. Its just a really useful website that Ive used in the screenshots purely f demonstration purposes.

KNOWN ISSUES

Occasionally you may find that the loading message does not disappear  you get an err popup. This is an known intermittent issue at the moment. Usually reloading the page  trying again solves it.

SOURCE CODE

This extension is open source under the MIT licence. See the Github project f details  code:
https://github.com/devilishio/seesponsive
                                

Seesponsive插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 SeesponsiveChrome插件v1.0版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决