兩種方案：

1 使用 postcss-pxtorem插件

npm install postcss-pxtorem autoprefixer --save-dev #

或 yarn add postcss-pxtorem autoprefixer -D

2、postcss-px-to-viewport

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

或

yarn add postcss-px-to-viewport -D

安裝完成后再項目跟目錄下新建postcss.config.cjs

module.exports = {plugins: {// 自動添加瀏覽器前綴autoprefixer: {overrideBrowserslist: ['Android 4.1','iOS 7.1','Chrome > 31','ff > 31','ie >= 8']},// px 轉 rem 配置// 'postcss-pxtorem': {//   rootValue: 75, // 設計稿寬度的 1/10（375px 設計稿對應 37.5）//   propList: ['*'], // 需要轉換的屬性，* 表示所有//   unitPrecision: 2, // 轉換后的小數位數//   selectorBlackList: ['ignore-'], // 忽略帶 ignore- 前綴的類//   replace: true, // 直接替換 px 而不是添加備用屬性//   mediaQuery: false, // 不轉換媒體查詢中的 px//   minPixelValue: 1, // 小于 1px 不轉換//   // exclude: /node_modules/i // 排除 node_modules 目錄// },// px 轉 vw vh 配置'postcss-px-to-viewport': {viewportWidth: 375, // 設計稿的視口寬度（核心配置）viewportHeight: 667, // 設計稿的視口高度（可選）unitPrecision: 5, // 轉換后保留的小數位數viewportUnit: 'vw', // 主要轉換的單位，可選 vw/vhselectorBlackList: ['ignore-'], // 不轉換的選擇器minPixelValue: 1, // 小于等于 1px 不轉換mediaQuery: false, // 是否轉換媒體查詢中的 pxexclude: /node_modules/i, // 排除轉換的目錄include: undefined, // 需要強制轉換的目錄landscape: false, // 是否處理橫屏情況landscapeUnit: 'vh', // 橫屏時使用的單位landscapeWidth: 667 // 橫屏時的視口寬度}}
};

以上代碼為 rem 和 vw vh 兩種方案，大家在開發中任選其中一個就可以

這個兩種方案沒有辦法轉換行內樣式，

下面我們可以寫兩個函數將行內樣式轉換

export const pxToVw=(px, designWidth = 375)=> {const vw = (px / designWidth) * 100;// 先乘 100000 后四舍五入，再除以 100000 保留5位小數const roundedVw = Math.round(vw * 100000) / 100000;// 確保即使小數位不足5位也顯示5位return roundedVw.toLocaleString('en-US', {minimumFractionDigits: 5,maximumFractionDigits: 5}) + 'vw';
}
export function pxToRem(px, rootValue = 75) {const rem = px / rootValue;// 保留 5 位小數（與 postcss-pxtorem 的 unitPrecision 保持一致）const roundedRem = Math.round(rem * 100000) / 100000;// 確保顯示 5 位小數return roundedRem.toLocaleString('en-US', {minimumFractionDigits: 5,maximumFractionDigits: 5}) + 'rem';
}

需要注意的是

pxToVw 的designWidth 參數需要和postcss.config.cjs的viewportWidth 值保持一致

pxToRem的rootValue參數值需要和postcss.config.cjs的 rootValue值保持一致