vue2 cli5 移动端（h5）适配

一、rem方案

1. 安装插件

下载amfe-flexible：npm i amfe-flexible（设置rem的基准值）

下载postcss-pxtorem ： npm i -D postcss-pxtorem （将px转成rem）

2. 在main.js里引入amfe-felxible

import 'amfe-flexible'

3. 与src同级，创建postcss.config.js文件

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 判断是否使用vant,进行不同的设置
      // rootValue({file}){
      //    return file.indexOf('vant') !==-1?37.5:75
      //  },
      rootValue: 75, //如果设计稿宽度是750px,确定不使用vant
      //  rootValue:37.5,//如果设计稿宽度是375px,无论是否使用vant
      propList: ['*', '!font', '!line-height', '!letter-spacing'],
    },
  },
}

二、vm方案

1、安装插件

下载postcss-px2vp ： npm i -D postcss-px2vp （将px转成vw）

2、与src同级，创建postcss.config.js文件

module.exports = {
  plugins: {
    'postcss-px2vp': {
      // 判断是否使用vant,进行不同的设置
      viewportWidth(rule){
        const file=rule.source?.input.file
         return file?.includes('vant')?375:750
       },
      rootValue: 750, //如果设计稿宽度是750px,确定不使用vant
      //  rootValue:375,//如果设计稿宽度是375px,无论是否使用vant
      propList: ['*', '!font', '!line-height', '!letter-spacing'],
    },
  },
}

来源：https://www.bilibili.com/video/BV1YT411f7Qe?vd_source=01fdab5c03d7c81fbf512838885dd7c4