在前端开发中，我们经常会遇到需要使用 rem 单位来实现响应式布局的情况。不过，有些老旧的浏览器并不支持 rem 单位，为了确保页面的兼容性，我们需要使用 px 单位来作为兼容性降级。但是这样做会导致代码变得臃肿且难以维护。
针对这个问题，我们可以使用 rework-rem-fallback 这个 npm 包来解决。本篇文章将介绍如何使用这个包来实现 rem 单位与 px 单位的自动转换，并且避免不必要的代码冗余。
什么是 rework-rem-fallback
rework-rem-fallback 是一个使用 rework 来进行 CSS 处理的插件，它会自动将以 rem 为单位的样式转换为 px 像素值，并将转换后的样式插入到样式表中。这样，即使浏览器不支持 rem 单位，页面也可以显示正确的样式。
如何使用 rework-rem-fallback
安装 rework-rem-fallback：
$ npm install rework-rem-fallback
在项目的 css 文件中引入 rework-rem-fallback：
@import 'rework-rem-fallback';
引入 rework-rem-fallback 后，我们需要设置基准字体大小，这个大小可以根据页面设计稿的尺寸来确定。以 750px 的设计稿为例，我们通常会将基准字体大小设置为 75px：
html {
font-size: 75px;
}接下来就可以愉快地使用 rem 单位了，例如：
.box {
width: 5rem;
height: 2rem;
font-size: 1.2rem;
}在样式生成后，rework-rem-fallback 会将以上代码转换为：
.box {
width: 375px;
height: 150px;
font-size: 24px;
width: 5rem;
height: 2rem;
font-size: 1.2rem;
}这样我们就实现了自动转换 rem 到 px 单位的功能。
注意：如果你的代码中已经使用了 px 单位，rework-rem-fallback 不会对这些代码进行处理。因此，建议在编写 CSS 时只使用 rem 单位，以保证自动转换的效果。
示例代码
-- -------------------- ---- ------- ------- ---------------------- ---- - ---------- ----- - ---- - ------ ----- ------- ----- ---------- ------- -
总结
使用 rework-rem-fallback 可以有效地解决 CSS 中 rem 单位的兼容性问题，并且减少了代码的冗余，提高了代码的可维护性。在实际的开发中，我们可以将这个包整合到自己的构建流程中，以实现自动化处理 CSS 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76699