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