作为前端开发者，我们可能经常需要处理 CSS 样式文件，其中一个常见的问题是如何在处理 CSS 的过程中保留现有的像素字号。npm 包 postcss-preserve-px-fontsize 就是为了解决这个问题而存在的一款工具。本文将介绍该工具的使用教程，包括如何安装和配置，以及如何在项目中使用该工具来处理 CSS 样式。
安装及配置
首先需要安装 postcss-preserve-px-fontsize，可以使用 npm 命令进行安装：
npm install postcss postcss-preserve-px-fontsize
安装完成后，在项目中添加 postcss 的配置文件及相关设置。在项目的根目录下新建一个名为 postcss.config.js 的文件，并添加以下内容：
-- -------------------- ---- -------
-------------- - -
-------- -
-----------------------------------------
---------- ---- --- ---- -- ------------------------
------ ------ -- -----------
---
-- --- ------- --
-
--这里我们只需要配置一个插件，即 postcss-preserve-px-fontsize。该插件需要我们设定两个参数：
fontSizes：目标样式中所保留的字号。如果你的页面只有三种字号，那么你可以直接使用数组写出这三种字号。如果你的页面有多种字号，那么你可以留空此处，然后在使用时通过另一个插件将所有字号存入数组中。units：目标样式中所保留的单位。这里我们只需要保留 px 单位即可。
使用示例
以上述配置文件为例，我们对以下的样式进行处理：
-- -------------------- ---- ------- -- - ---------- ----- - -- - ---------- ------- - - - ---------- ----- - ---------- - -------- ----- ---------- ----- -
处理前，以上样式中的字号都是使用了 rem 或 px 作为单位，我们需要将这些样式的字号改为我们之前在配置文件中设定的三种字号：16、18 和 20。
使用 postcss-preset-env 插件将所有字号转为数组形式：
-- -------------------- ---- -------
----- ---------------- - ------------------------------
-------------- - -
-------- -
-----------------------------------------
------ ------
---
------------------
------ --
--------- -
------------------------------ -
---------- ---- --- ----
-------- ------ ---------- -- -
----- --------- - --- -- -------- ----
----- --------- - ---------------------- -- -------- - -----------
---------- - -------------------
-------------------------------
------- ------- ----- -- -
-- ------- -
------ --------------
-
-- ----- --- ---- -- ---- --- ------ -
------ ---------------
-
----- ------- - ---------------
-- -------- - ---- -
------ ----
-
----- -------- - ------- - ----------
------ ----------------------------
-
--
---------- - -------------------
-----------------------
------- ------- ----- -- -
----- ------- - ---------------
-- -------- - ---- -
------ ----
-
----- -------- - ------- - ----------
----- --------------- - ----------------------- ----- -- -
-- -------------- - --------- - ------------- - ---------- -
------ -----
-
------ -----
---
------ --------------------------------- -- --------- ----
-
--
-
-
-
--
-
--现在我们来说明一下以上代码的执行步骤：
- 首先我们在配置文件中使用 postcss-preserve-px-fontsize 插件将样式中的所有 px 单位保留下来。
- 接下来使用 postcss-preset-env 插件将所有字号都转成数组的形式，方便后面我们进行处理。
- 在 postcss-preset-env 插件的配置项中，我们使用 preserve-missing-font-sizes 插件，将缺少的字号转为近似的字号。我们首先将每个字号都转成 rem 作为单位，然后将 rem 转成 px，并找出与此 px 值最接近的那个字号。
经过处理后的样式：
-- -------------------- ---- ------- -- - ---------- ---- -- ---- --- - -- - ---------- ---- -- ------ --- - - - ---------- ----- - ---------- - -------- ----- ---------- ----- -
总结
通过上述实例的演示，我们可以看出 postcss-preserve-px-fontsize 这个工具对我们处理 CSS 样式有很大的帮助。在之前的样式中，如果需要将字号改为指定的三种值，那么就需要手动一一修改，而这无疑会大大增加开发者的工作量。而有了 postcss-preserve-px-fontsize，只需要在配置中指定要保留的 px 值，就可以方便地处理样式中的字号了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668fcd9381d61a354104f