方法一：rem單位 使用amfe-flexible和postcss-pxtorem （寫的時(shí)候需要轉(zhuǎn)換單位）

vant本身是px單位的，實(shí)際項(xiàng)目設(shè)計(jì)圖是750px寬，若要實(shí)現(xiàn)同時(shí)自適應(yīng)，需要結(jié)合兩個(gè)插件：
amfe-flexible和postcss-pxtorem

步驟如下

一、如何將px單位轉(zhuǎn)化為rem？

借助postcss-pxtorem插件，postcss-pxtorem 是一款 postcss 插件，用于將單位轉(zhuǎn)化為 rem。

安裝：

npm install postcss-pxtorem -s

配置：vue.config.js文件

const pxtorem = require('postcss-pxtorem')
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          pxtorem({
            rootValue: 37.5,
            propList: ['*'],
            // 該項(xiàng)僅在使用 Circle 組件時(shí)需要
            // 原因參見 https://github.com/youzan/vant/issues/1948
            selectorBlackList: ['van-circle__layer']
          })
        ]
      }
    }
  }
}

二、如何做rem適配？
rem適配文檔上建議使用lib-flexible，flexible適配的原理是物理像素與邏輯像素的相互轉(zhuǎn)化：物理像素px = window.screen.width(邏輯像素pt) * window.devicePixelRatio
如何配合框架使用:
1.安裝

npm install amfe-flexible -s

2.main.js引入

import 'amfe-flexible'

（index.html要設(shè)置meta）

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, minimum-scale=1">

————————————
關(guān)于使用
為了要使用vant的樣式，rootValue應(yīng)設(shè)置為37.5

設(shè)計(jì)圖是750px寬的，則寫的時(shí)候如果用px 則需要除以2，如果用rem的話，要自行計(jì)算 px/75=rem，或者使用IDE的插件計(jì)算

使用藍(lán)湖的話，很方便

image.png

另，如果不使用vant，單純的還原設(shè)計(jì)圖
可以將rootValue設(shè)置為75，css像素可以直接按設(shè)計(jì)圖寫

參考：https://www.cnblogs.com/changxue/p/11322855.html

方法二（推薦）：vw單位 使用postcss-px-to-viewport （自定義的樣式）

安裝
npm install postcss-px-to-viewport --save-dev

配置：

const pxtoviewport = require('postcss-px-to-viewport');


postcss: {
        plugins: [
          pxtoviewport({
            unitToConvert: "px", // 要轉(zhuǎn)化的單位
            viewportWidth: 750, // UI設(shè)計(jì)稿的寬度
            unitPrecision: 6, // 轉(zhuǎn)換后的精度，即小數(shù)點(diǎn)位數(shù)
            propList: ["*"], // 指定轉(zhuǎn)換的css屬性的單位，*代表全部css屬性的單位都進(jìn)行轉(zhuǎn)換
            viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
            fontViewportUnit: "vw", // 指定字體需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
            selectorBlackList: ["wrap"], // 指定不轉(zhuǎn)換為視窗單位的類名，
            minPixelValue: 1, // 默認(rèn)值1，小于或等于1px則不進(jìn)行轉(zhuǎn)換
            mediaQuery: true, // 是否在媒體查詢的css代碼中也進(jìn)行轉(zhuǎn)換，默認(rèn)false
            replace: true, // 是否轉(zhuǎn)換后直接更換屬性值
            exclude: [/node_modules/], // 設(shè)置忽略文件，用正則做目錄名匹配
            landscape: false // 是否處理橫屏情況
          })
        ]

      }

使用這個(gè) vant的單位不變 自定義的單位可直接寫px 會(huì)轉(zhuǎn)化為vw