前言

此文章写于2022年06月16日，可能后续由于插件的变动等不一定适用。

背景

公司项目要求给pc版页面做一个字体大小切换的双模式，由于前期使用的是px单位，所以需要借助插件实现转换，以节省时间，话不多说，开始吧，骚年！

安装插件

yarn add postcss-pxtorem

我在使用过程中对于插件版本没有进行比对研究，直接安装的，当前版本6.0.0。

项目配置

1. 创建一个rem.js文件，用以设置全局的字体，在我的项目中，我只需要转换px单位，不需要根据窗口做适配，所以我这里的配置简单粗暴，如果需要做适配的可以用第二段代码片段

• 第一段自己项目使用的

// rem等比适配配置文件
// 基准大小
const baseSize = 14 // 注意此值要与 .postcss.js 文件中的 rootValue保持一致
// 设置 rem 函数
function setRem() {
 document.documentElement.style.fontSize = baseSize + 'px'
}
// 初始化
setRem()

• 第二段为网上借鉴

// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小, 字体大小最小为12
  let fontSize = (baseSize * Math.min(scale, 2))>12 ? (baseSize * Math.min(scale, 2)): 12
  document.documentElement.style.fontSize = fontSize + 'px'
}
//初始化
setRem()
//改变窗口大小时重新设置 rem,这里最好加上节流
window.onresize = function () {
  setRem()
}

2. 将文件rem.js引入到man.js中，你可以把该js放在你想放的位置，注意路径即可，我这里放在跟man.js同级里

import './rem.js'

3. 网上很多教程到这里会让创建一个postcss.config.js 跟package.json同一个目录下，但是这里我试了发现不行，但是具体为什么不行，不是很清楚，有兴趣的同学可以自行研究一下，所以这里我是找到项目文件.postcssrc.js文件进行配置

module.exports = {
  "plugins": {
    'postcss-pxtorem': {
      rootValue: 14,
      propList: ['*']
    }
  }
}

到这里基本已经结束了，只需要重启便可以看到页面已经转换成功。

如果运行失败了，请检查一下依赖是否齐全

"postcss-pxtorem": "^6.0.0"

如果你想只转字体或者其他什么，可以这样配置

propList : [ 'font' ,  'font-size' ,  'line-height' ,  'letter-spacing' ]

最后贴上npm的一些配置介绍，地址在 这里

1. rootValue(Number | Function) 表示根元素字体大小或根据input参数返回根元素字体大小
2. unitPrecision（数字）允许 REM 单位增长到的十进制数字。
3. propList（数组）可以从 px 更改为 rem 的属性。
	- 项目值需要完全匹配。
	- 使用通配符*启用所有属性。例子：['*']
	- 在单词的开头或结尾使用。（['*position*']将匹配background-position-y）
	- 用于!不匹配属性。例子：['*', '!letter-spacing']
	- 将“not”前缀与其他前缀组合。例子：['*', '!font*']
5. selectorBlackList（数组）要忽略并保留为 px 的选择器。
	- 如果 value 是字符串，它会检查 selector 是否包含字符串。
		- ['body']将匹配.body-class
	- 如果 value 是 regexp，它会检查选择器是否与 regexp 匹配。
		- [/^body$/]将匹配body但不匹配.body
6. replace（布尔值）替换包含 rems 的规则，而不是添加回退。
7. mediaQuery（布尔值）允许在媒体查询中转换 px。
8. minPixelValue(Number) 设置要替换的最小像素值。
9. exclude（字符串、正则表达式、函数）要忽略并保留为 px 的文件路径。
	- 如果 value 是字符串，它会检查文件路径是否包含字符串。
		- 'exclude'将匹配\project\postcss-pxtorem\exclude\path
	- 如果 value 是 regexp，它会检查文件路径是否与 regexp 匹配。
		- /exclude/i将匹配\project\postcss-pxtorem\exclude\path
	- 如果 value 是 function，您可以使用 exclude 函数返回 true 并且文件将被忽略。
		- 回调将文件路径作为参数传递，它应该返回一个布尔结果。
		- function (file) { return file.indexOf('exclude') !== -1; }