VUE PC端移动端 REM 适配

需要两个插件

lib-flexible 用于设置 rem 基准；

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem；

安装lib-flexible

cnpm i amfe-flexible

在main.js中引用

import 'amfe-flexible'

安装postcss-pxtorem

cnpm install postcss-pxtorem -D

vue2，然后在项目根目录中创建 .postcssrc.js 文件：

module.exports = {
  plugins: {
    'autoprefixer': {
       browsers: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*'],
      selectorBlackList: ['norem']
    }
  }
}

在vue3+vite中：

在vite.config.js中配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer';
import postCssPxToRem from 'postcss-pxtorem';
export default defineConfig({
  plugins: [vue()],

  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'],
        }),
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换
        }),
      ],
    },
  }
})

`rootValue`：表示根元素字体大小，它会根据根元素大小进行单位转换

设置为你的设计稿的十分之一。

例如设计稿是 750 宽，则应该设置为 75。

`propList` 用来设定可以从 px 转为 rem 的属性

例如 `*` 就是所有属性都要转换，`width` 就是仅转换 `width` 属性

VUE PC端 移动端 REM 适配