简介
quincy-cize 是一个用于处理 CSS 样式的 npm 包。它可以帮助前端开发者快速、方便地进行 CSS 样式的自适应处理，从而在不同屏幕尺寸下保证页面呈现效果的一致性。
该包基于 postcss-px-to-viewport 实现。我们在其基础上进行了一些优化和改进，使得使用 quincy-cize 能够更加方便、灵活、高效。
安装
通过 npm 安装 quincy-cize：
--- ------- ---------- -----------
如果你使用的是 yarn，可以使用以下命令：
---- --- -- -----------
使用
在项目中引入
在项目中的 postcss.config.js 文件中添加 quincy-cize 插件，例如：
-------------- - -
-------- -
------------------------
-- ----
-- ---
---
-- ---
-
-在配置文件中添加选项
在上述代码中，由于我们在插件传入的选项中并没有传入任何配置，因此 quincy-cize 会使用默认配置来进行转换。如果你需要修改默认配置，可以在插件选项中传入相应的配置。
以下是 quincy-cize 支持的配置选项：
viewportWidth：设计稿宽度，该值必须传入，单位为像素（px）。viewportHeight：设计稿高度，可选，若未传入则默认为 667 像素（iPhone 6/7/8）。unitPrecision：转换时保留的小数位数，可选，若未传入则默认为 5。
完整的配置示例：
- -------------- ---- -- ----- --------------- ----- -- ----- -------------- - -- ---------- -
示例代码
在实际项目中，我们可以在 css 文件中使用像素（px）作为单位，而不必考虑不同屏幕尺寸的问题。quincy-cize 会自动将 css 样式中的像素单位（px）转换为视口单位（vw、vh、vmin 或 vmax）。
例如，假设我们的设计稿宽度为 750 像素，我们需要将某一元素的宽度设置为 300 像素。在 css 文件中，我们可以这样写：
-------- - ------ ------ -
使用 quincy-cize 后，该样式会被转换为：
-------- - ------ ----- -
注意事项
在使用 quincy-cize 进行样式转换时，需要注意以下事项：
- 仅跟随数字左侧的第一个空格进行转换。例如，
border: 2px solid #f00会被转换，但box-shadow: 1px 1px 10px rgba(0, 0, 0, .5)不会被转换。 - 转换由 postcss 插件完成。因此，必须先使用 postcss 对 css 进行预处理，才能够使用
quincy-cize进行样式转换。在使用create-react-app创建项目时，默认已安装postcss插件。
总结
quincy-cize 是一个方便、高效的前端工具，可以帮助开发者快速实现对于不同屏幕尺寸的自适应处理。在开发过程中，我们可以根据设计稿宽度，使用像素（px）作为单位进行样式设置，从而更加方便快捷地进行开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005731781e8991b448e94da