vue3配置rem適配

postcss-pxtorem 是一款 postcss 插件，用於將單位轉化為 rem

amfe-flexible 用於設置 rem 基准值 npm i postcss-pxtorem@5.1.1

使用 amfe-flexible 動態設置 REM 基准值（html 標簽的字體大小）

安裝組件

安裝postcss-pxtorem和amfe-flexible的時候，要注意版本， 否者可能會出現如下
Error: PostCSS plugin tailwindcss requires PostCSS 8 這個因為版本出問題了，下載之后，

npm install postcss-pxtorem -D 
npm install amfe-flexible -S -D 
是 --save-dev 的簡寫 –save-dev || -D //開發依賴（輔助） --save || -S // 運行依賴（發布）

main.js

在main.js導入amfe-flexible

import 'amfe-flexible';

postcss配置

配置postcss-pxtorem

module.exports = {
  plugins: {
    tailwindcss: {},
    // 兼容瀏覽器，添加前綴
    autoprefixer: {},
    "postcss-pxtorem": {
      rootValue: 37.5, //結果為：設計稿元素尺寸/16，比如元素寬320px,最終頁面會換算成 20rem
      propList: ["*"], //是一個存儲哪些將被轉換的屬性列表，這里設置為['*']全部，假設需要僅對邊框進行設置，可以寫['*', '!border*']
      unitPrecision: 5, //保留rem小數點多少位
      //selectorBlackList: ['.radius'],  //則是一個對css選擇器進行過濾的數組，比如你設置為['fs']，那例如fs-xl類名，里面有關px的樣式將不被轉換，這里也支持正則寫法。
      replace: true, //這個真不知到干嘛用的。有知道的告訴我一下
      mediaQuery: false, //媒體查詢( @media screen 之類的)中不生效
      minPixelValue: 12, //px小於12的不會被轉換
    },
  },
}