vue简单适配方案

vue2+webpack

使用 postcss-pxtorem 插件

npm install postcss-pxtorem -dev --save

在vue.config.js中

module.export = {
    ...
    css:{
    loaderOptions:{
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 16,
            unitPrecision: 5,
            propList: ['*'],
            selectorBlackList: ['no-conversion-'],
            replace: false,
            mediaQuery: false,
            minPixelValue: 3,
            exclude: /node_modules/i
          }),
        ]
      }
    }
  },
}

vue3+vite

使用 postcss-px-to-viewport 插件

在根目录创建postcss.config.js文件

/**
 *  postcss-px-to-viewport移动端适配方案配置
 *  安装: npm install postcss-px-to-viewport --save-dev
 *
 */
module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      unitToConvert: "px",        // 要转化的单位
      viewportWidth: 375,         // UI设计稿的宽度
      unitPrecision: 5,           // 转换后的精度，即小数点位数
      propList: ["*"],            // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw",         // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw",     // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["van"], // 指定不转换为视窗单位的类名，（我这里ui组件库用的是vant，vant的样式van-x-x前缀）
      minPixelValue: 1,           // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true,           // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true,              // 是否转换后直接更换属性值
      exclude: [/node_modules/],  // 设置忽略文件，用正则做目录名匹配
      landscape: false,           // 是否处理横屏情况
    },
  }
}