yarn add --dev postcss-px-to-viewport

在項目根目錄下創(chuàng)建 postcss.config.js 文件

module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px', // 需要轉(zhuǎn)換的單位，默認為"px"
viewportWidth: 750, // 設計稿的視口寬度
exclude: [/node_modules/], // 解決vant375,設計稿750問題。忽略某些文件夾下的文件或特定文件
unitPrecision: 5, // 單位轉(zhuǎn)換后保留的精度
propList: ['*'], // 能轉(zhuǎn)化為vw的屬性列表
viewportUnit: 'vw', // 希望使用的視口單位
fontViewportUnit: 'vw', // 字體使用的視口單位
selectorBlackList: [], // 需要忽略的CSS選擇器，不會轉(zhuǎn)為視口單位，使用原有的px等單位。
minPixelValue: 1, // 設置最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有大于1的值會被轉(zhuǎn)換
mediaQuery: false, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位
replace: true, // 是否直接更換屬性值，而不添加備用屬性
landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
landscapeUnit: 'vw', // 橫屏時使用的單位
landscapeWidth: 1125 // 橫屏時使用的視口寬度
}
}
}