在前端开发中，我们经常需要对网站或者应用进行布局调整，这个过程必须要经过在浏览器中不断的调试才能达到最终的视觉效果。但是，通过这种方式调整需要不断的修改代码、刷新浏览器页面，反复多次，在效率和时间上都是不划算的。如果我们能够提供一种快捷方便的方法来实现布局设计器的目的，那么工作将变得更加顺畅和高效。这就引入了 sizzy npm 包的使用。
什么是 Sizzy
Sizzy 是一个能够帮助我们快速高效进行网站和应用布局调整的 npm 包。它可以让我们在浏览器中实时的看到我们的页面布局。它不需要我们手动刷新页面，自动化的管理浏览器，支持多设备、多浏览器同步的预览，可以实现多种运用场景下的自适应布局的调整。
Sizzy 的功能
Sizzy有很多好处和特性，包括以下：
- 快速布局校验：Sizzy 允许您在多个设备上进行实时预览和布局。这意味着您可以输入规则后立即看到它们的效果，而不必在所有设备上进行重复布局。
- 方便快捷：Sizzy 提供了一个添加窗口来添加新设备的选项，因此可以在任何时候添加设备，而不必修改任何代码。
- 设计视差：Sizzy 提供设备之间的视差设计，这是检查问题所在的轻松方法。
- 简单创作：Sizzy 集成了所有的高级布局选项，这使得在所有设备上进行功能扩展和排版工作变得轻而易举。
Sizzy 的安装
使用 Sizzy 需要以下基本步骤：
首先，你需要在你的项目中安装 Sizzy, 可以通过如下命令安装：
npm install --global sizzy或者
yarn global add sizzy安装后，你可以使用命令
sizzy来开启 Sizzy，这将在浏览器中显示一个页面，该页面将用于对设备进行布局和调整。
Sizzy 实战
在项目中使用 Sizzy
例如，如果你想使用 Sizzy 检查你的 react 应用程序，并且你的应用程序正在监听 localhost:3000，那么你可以在终端中打开 Sizzy：
sizzy http://localhost:3000
现在 Sizzy 会在你的浏览器中打开一个页面，它会在不同大小的屏幕上显示你的应用程序，以便您可以检查并调整您的布局。
运行Sizzy内置的示例项目
Sizzy 还提供了一个示例项目，因此您可以着手使用它来了解其功能以及如何使用。
您可以使用以下命令在终端中启动 Sizzy 示例项目：
sizzy demo
此命令将启动 Sizzy 示例项目并在您的浏览器中打开它。在该示例上，您可以立即开始测试 Sizzy 的功能。
Sizzy 的启用和配置
Sizzy 还具有配置选项，可以更改您设置中的默认设备、调整出现视差的高度以及控制其他布局选项。您可以在启动 Sizzy 后按 "ctrl "和 "D "键，访问 Sizzy 的面板。如果您使用的是其他 web 调试工具，也可以使用 Sizzy 的 API 进行匹配配置。
总结
Sizzy 是前端开发人员的一种非常方便的工具，它可以帮助我们快速高效的进行不同设备上的页面布局调整。它具有很多好处和特性，包括快速布局校验、方便快捷、设计视差和简单创作等等，这使得它成为了和其他类似工具相比区别的一大优势。希望这篇使用教程对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ea181e8991b448e7687