npm 包 quincy-cize 使用教程

简介

quincy-cize 是一个用于处理 CSS 样式的 npm 包。它可以帮助前端开发者快速、方便地进行 CSS 样式的自适应处理，从而在不同屏幕尺寸下保证页面呈现效果的一致性。

该包基于 postcss-px-to-viewport 实现。我们在其基础上进行了一些优化和改进，使得使用 quincy-cize 能够更加方便、灵活、高效。

安装

通过 npm 安装 quincy-cize：

npm install --save-dev quincy-cize

如果你使用的是 yarn，可以使用以下命令：

yarn add -D quincy-cize

使用

在项目中引入

在项目中的 postcss.config.js 文件中添加 quincy-cize 插件，例如：

-- -------------------- ---- -------
-------------- - -
  -------- -
    ------------------------
      -- ----
      -- ---
    ---
    -- ---
  -
-

在配置文件中添加选项

在上述代码中，由于我们在插件传入的选项中并没有传入任何配置，因此 quincy-cize 会使用默认配置来进行转换。如果你需要修改默认配置，可以在插件选项中传入相应的配置。

以下是 quincy-cize 支持的配置选项：

• viewportWidth：设计稿宽度，该值必须传入，单位为像素（px）。
• viewportHeight：设计稿高度，可选，若未传入则默认为 667 像素（iPhone 6/7/8）。
• unitPrecision：转换时保留的小数位数，可选，若未传入则默认为 5。

完整的配置示例：

{
  viewportWidth: 750,  // 设计稿宽度
  viewportHeight: 1334,  // 设计稿高度
  unitPrecision: 4  // 转换时保留的小数位数
}

示例代码

在实际项目中，我们可以在 css 文件中使用像素（px）作为单位，而不必考虑不同屏幕尺寸的问题。quincy-cize 会自动将 css 样式中的像素单位（px）转换为视口单位（vw、vh、vmin 或 vmax）。

例如，假设我们的设计稿宽度为 750 像素，我们需要将某一元素的宽度设置为 300 像素。在 css 文件中，我们可以这样写：

.element {
  width: 300px;
}

使用 quincy-cize 后，该样式会被转换为：

.element {
  width: 40vw;
}

注意事项

在使用 quincy-cize 进行样式转换时，需要注意以下事项：

1. 仅跟随数字左侧的第一个空格进行转换。例如，border: 2px solid #f00 会被转换，但 box-shadow: 1px 1px 10px rgba(0, 0, 0, .5) 不会被转换。
2. 转换由 postcss 插件完成。因此，必须先使用 postcss 对 css 进行预处理，才能够使用 quincy-cize 进行样式转换。在使用 create-react-app 创建项目时，默认已安装 postcss 插件。

总结

quincy-cize 是一个方便、高效的前端工具，可以帮助开发者快速实现对于不同屏幕尺寸的自适应处理。在开发过程中，我们可以根据设计稿宽度，使用像素（px）作为单位进行样式设置，从而更加方便快捷地进行开发。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731781e8991b448e94da