px转成rem

配置与安装步骤：

1. 安装依赖 npm i postcss-pxtorem -D

2. 在 Vue 项目的 src 文件夹下创建一个 config 文件夹：

3. 在 config 文件夹中创建 rem.js：

4. 将以下代码复制到 rem.js 中：

// 基准大小
const baseSize = 32或者16 /**32 是移动端，16是pc端*/
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

5. 在 src 文件夹下的 main.js 中引入：

import './config/rem'

6. 在 Vue 项目文件夹下的 postcss.config.js 中加入：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      "rootValue":37.5, //设计稿尺寸是375px的话，这里就要设置成37.5 
      "propList": ["*"]
    }
  }
}

如果运行报此错👇

PostCSS plugin postcss-pxtorem requires PostCSS 8.

结果方案是，卸载默认安装的版本，换成指定版本。

卸载默认安装的版本 
npm uninstall postcss-pxtorem
 
安装指定版本
npm i postcss-pxtorem@5.1.1

参考链接：http://www.qb5200.com/article/480037.html

https://blog.csdn.net/m0_55832273/article/details/121961078

https://blog.csdn.net/niuniu2878499107/article/details/128383601 (后来看到的，也可以参考，写的比我强)

https://blog.csdn.net/weixin_47416539/article/details/125032479

备注：此文档仅是记录我自己写的过程。