vant rem适配方案

背景：vant框架默认是以px作为单位的，并且根据375设计图实现的

适配步骤：

1、安装 postcss-pxtorem

npm i  postcss-pxtorem --save-dev

可以将项目中的所有px都以某一个基数转换为rem

2、vue.config.js配置

    配置转换的基数，这里我用的vw适配方案设为100,原理可以参照我之前写的文章 https://www.cnblogs.com/joyZ/p/13342253.html

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("autoprefixer")({
            // 配置使用 autoprefixer
            overrideBrowserslist: ["last 15 versions"],
            browsers: ["Android >= 4.0", "iOS >= 7"]
          }),
          require("postcss-pxtorem")({
            rootValue: 100, // 换算的 基数
            propList: ["*"]
          })
        ]
      }
    }
  }

　这样项目中所有的px都会被除以100的rem代替

    转换前vant中的button字体还是14px

   

  转换后就是0.14rem

     

 3、根元素的字体设置 html{font-size:26.67vw}

     既然是375的设计稿那么我们就将根元素的字体设置为26.67vw，在375p屏下就看到0.14rem被转换成非常接近14px，至此框架的适配就已经over

 4、设计稿还原

    我们设计稿的适配就需要以375为基准实现了，注意我们这里也是用px为单位，postcss-pxtorem会自动帮我们转换

    假设设计稿正好是375，那我们直接按照设计稿实现 12px即12px

    设计稿是750,我们写样式需要缩小1倍， 28px即14px