在移动端开发中，为了适配不同分辨率的设备，我们通常会使用 rem 单位来设置样式。一般情况下，我们会将设计图的尺寸进行换算，手动设置 rem 的值，但是这样的方式比较繁琐，而且容易出现问题。为了简化这一过程，我们可以使用 npm 包 fis3-packager-rem，来帮助我们自动将 px 转换为 rem。
安装
使用 npm 包 fis3-packager-rem 前，我们需要先安装 fis3：
npm install -g fis3
然后，在项目中安装 fis3-packager-rem：
npm install -g fis3-packager-rem
使用方法
使用 fis3-packager-rem 可以帮助我们将样式中的 px 单位转换为 rem 单位。使用方法如下：
- 将需要替换的样式文件放在 css 目录下。例如，我们有一个样式文件 styles.css，然后在 fis-conf.js 中添加以下代码：
fis.match('**.css', {
packager: fis.plugin('rem'),
parser: fis.plugin('css'),
postprocessor: fis.plugin('autoprefixer')
});- 然后，我们需要在样式中使用 rem 单位来设置样式。例如：
/* 将 16px 转换成 1rem */
div {
font-size: 1rem;
border: 1px solid #ccc;
margin: 0 0 10px;
padding: 10px 0;
}- 运行 fis3 打包命令，生成 CSS 文件。例如：
fis3 release -d ./output/
参数配置
fis3-packager-rem 还提供了一些参数配置可以让我们更加灵活地使用。以下是一些常用的配置：
remUnit
remUnit 指定了 1rem 对应的像素值，它的默认值为 75，表示 1rem 等于 75px。我们可以通过在 fis-conf.js 中添加以下代码来修改默认值：
fis.match('**.css', {
packager: fis.plugin('rem', {
remUnit: 100
}),
parser: fis.plugin('css'),
postprocessor: fis.plugin('autoprefixer')
});baseDpr
baseDpr 指定了默认的 DPR 值，它的默认值为 2，表示 1px 等于 2 个物理像素。我们可以通过在 fis-conf.js 中添加以下代码来修改默认值：
fis.match('**.css', {
packager: fis.plugin('rem', {
baseDpr: 3
}),
parser: fis.plugin('css'),
postprocessor: fis.plugin('autoprefixer')
});remPrecision
remPrecision 指定了转换后的 rem 值保留的小数位数，它的默认值为 6。我们可以通过在 fis-conf.js 中添加以下代码来修改默认值：
fis.match('**.css', {
packager: fis.plugin('rem', {
remPrecision: 4
}),
parser: fis.plugin('css'),
postprocessor: fis.plugin('autoprefixer')
});示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------------------- -
--------- ----------------- -
-------- ----
-------- --
------------- -
---
------- ------------------
-------------- --------------------------
---
-----------------
---------------- -
---------- ----------------------- -
------ -
--
--
------------------------------------------ -
-------- ----
--
--------------- -
---------- -----------------------
--
---------------- -
---------- ---------------------------- -
----- ----------
--
--
---------------- -
---------- ----------------------------- -
-------- ----
--
--
------------ -
------- -
--------------------------
--------------------------- -
--- ----------
--
-
---以上就是关于 npm 包 fis3-packager-rem 的使用教程，希望对您的前端工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005569881e8991b448d3655