# spacingjs

**Repository Path**: Rickyxrc/spacingjs

## Basic Information

- **Project Name**: spacingjs
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-08
- **Last Updated**: 2021-12-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Spacing JS

[![npm version](https://img.shields.io/npm/v/spacingjs.svg)](https://www.npmjs.com/package/@stevenlei/spacingjs)
![GitHub Stars](https://img.shields.io/github/stars/stevenlei/spacingjs)
![Github Forks](https://img.shields.io/github/forks/stevenlei/spacingjs)
![GitHub Open Issues](https://img.shields.io/github/issues/stevenlei/spacingjs)
![License](https://img.shields.io/github/license/stevenlei/spacingjs)

一个用于测量网页元素间距离的 JavaScript 小工具，用于前端开发的流程。[试试看](https://spacingjs.com)。

![](screenshot.png)

阅读此文档的其他语言版本：[English](README.md), [繁體中文](README.zh-Hant.md), [简体中文](README.zh-Hans.md).

## 如何使用

1. 在 HTML 页面中通过 `<script>` 标签加载 Spacing.js：

- UNPKG CDN:

```html
<script src="//unpkg.com/spacingjs" defer></script>
```

- jsDelivr CDN:

```html
<script src="//cdn.jsdelivr.net/npm/spacingjs" defer></script>
```

2. 将鼠标移动到一个元素上，然后按下 <kbd>Alt</kbd> 键（Windows）或 <kbd>⌥ Option</kbd> 键（Mac）。

3. 将鼠标移动到其他元素上，就会显示相关的测量结果。

## 更多选项

同时按下 <kbd>Shift</kbd> 键会延长测量结果的显示，这样我们就有足够时间进行屏幕截图。

## Chrome 浏览器插件及 Tampermonkey 版本

你可以在 [Chrome web store](https://chrome.google.com/webstore/detail/spacingjs/fhjegjndanjcamfldhenjnhnjheecgcc) 下载 Chrome 浏览器的插件版本，或透过 `npm run ext` 打包。

## 参与开发

欢迎 Fork 这个 Repo 进行开发，并提交 Pull Requests。在 [GitHub Issues](https://github.com/stevenlei/spacingjs/issues) 汇报 Bug，在 [GitHub Discussions](https://github.com/stevenlei/spacingjs/discussions) 讨论功能／想法／问题。

## 授权协议

Spacing.js 使用 [MIT 授权](LICENSE)