vue 2.6.11 移动端项目 px转rem

一、配置与安装步骤：

1、在 Vue 项目的 src 文件夹下创建一个 utils 文件夹：

2、在 utils文件夹中创建 rem.js：

内容如下

// 基准大小

const baseSize = 32

// 设置 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()

}

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

import './utils/rem'

5、在 Vue 项目根目录终端引入：

npm install postcss-pxtorem -D

 6、在 Vue 项目文件夹下的 postcss.config.js 中加入或者新建一个空白文件：

module.exports = {

    plugins: {

        autoprefixer: {},

        "postcss-pxtorem": {

            "rootValue": 16,

            "propList": ["*"]

        }

    }

}

 然后，你的vue 项目就能实现在页面中自动将 px 转换成 rem 了

注意点：

当安装完成后重启项目到时候报如下错：

vue Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

 解决办法：发现是postcss-pxtorem版本过高 可以安装 5.1.1 版本

npm i [email protected]