vue实现rem适配

使用 postcss-pxtorem 插件实现 rem 适配

在 Vue 项目中安装 postcss-pxtorem 插件

npm install postcss-pxtorem -D

配置 postcss.config.js 文件

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度/10
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem开头的class
    }
  }
}

动态设置 html 的 font-size

在项目入口文件 main.js 中添加以下代码

function setRem() {
  const docEl = document.documentElement
  const width = docEl.clientWidth
  const rem = width / 10
  docEl.style.fontSize = rem + 'px'
}

window.addEventListener('resize', setRem)
setRem()

使用 flexible.js 方案实现 rem 适配

下载 flexible.js 并引入项目

// 在 index.html 中引入
<script src="/path/to/flexible.js"></script>

配置 postcss-pxtorem

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 750px设计稿
      propList: ['*'],
      minPixelValue: 2
    }
  }
}

使用 viewport 单位替代 rem

安装 postcss-px-to-viewport 插件

npm install postcss-px-to-viewport -D

配置 postcss.config.js

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750, // 设计稿宽度
      unitPrecision: 5,
      viewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false
    }
  }
}

注意事项

设计稿尺寸通常为750px时，rootValue设置为75；375px设计稿设置为37.5

移动端项目需要在index.html中添加viewport meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

对于不想转换的样式，可以使用PX或Px作为单位，或者在selectorBlackList中配置过滤规则