Vue3使用postcss-pxtorem

在Vue3中使用postcss-pxtorem，你需要进行以下几个步骤：

1. 首先，在你的项目中安装postcss-pxtorem插件，并确保安装了PostCSS 8的版本。

2. 修改package.json文件，在"postcss"字段下添加如下配置：

"postcss": {
  "plugins": {
    "autoprefixer": {},
    "postcss-pxtorem": {
      "rootValue": 75, 
      "propList": ["*"], 
      "minPixelValue": 2 
    }
  }
}

这里的rootValue表示设计稿元素尺寸相对于75px的比例，propList表示要转换的属性列表，minPixelValue表示要替换的最小像素值。

3. 在项目中新建一个rem.js文件，并在main.js中引用它。rem.js文件中的代码如下：

// 基准大小
const baseSize = 18

// 设置rem函数
function setRem() {
  // 当前页面宽度相对于1920宽的缩放比例，可以根据实际情况进行修改
  const scale = document.documentElement.clientWidth / 1920

  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}

// 初始化rem
setRem()

// 窗口大小改变时重新设置rem
window.onresize = function () {
  setRem()
}

这样，你就可以在Vue3中使用postcss-pxtorem插件来实现rem单位的自动转换了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3.0中使用postcss-pxtorem](https://blog.csdn.net/sd19871122/article/details/113845798)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Vuecli3配置postcss-pxtorem](https://blog.csdn.net/qq_28259083/article/details/124301683)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue-cli3.0 配置 以及 postcss-pxtorem的使用](https://blog.csdn.net/weixin_34378922/article/details/93177154)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]