Vue项目中自动将px转换为rem

一、配置与安装步骤：

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

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

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

// 基准大小

const baseSize =

// 设置 rem 函数

function setRem () {

  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。

  const scale = document.documentElement.clientWidth /

  // 设置页面根节点字体大小

  document.documentElement.style.fontSize = (baseSize * Math.min(scale, )) + 'px'

}

// 初始化

setRem()

// 改变窗口大小时重新设置 rem

window.onresize = function () {

  setRem()

}

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

import './config/rem'

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

npm install postcss-pxtorem -D

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

module.exports = {

  plugins: {

    autoprefixer: {},

    "postcss-pxtorem": {

      "rootValue": ,

      "propList": ["*"]

    }

  }

}

至此，Vue 项目就能实现在页面中自动将 px 转换成 rem 了

二、实例演示：

假如给出设计图是 375*812，可以在代码中直接写入：

div{

  width: 375px;

  height: 812px;

}

此时在页面中显示：

如果要让部分属性不转换成 rem，可以将 px 写成 Px：

div{

  width: 375Px;

  height: 812px;

}

这时在页面中就会保留 375px 了：

巴特西

Vue项目中自动将px转换为rem

一、配置与安装步骤：

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

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

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

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

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

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

二、实例演示：

最新文章

热门文章