react 中使用移動端適配 postcss-px-to-viewport

postcss-px-to-viewport 安裝

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

運行 npm eject 將react配置暴露出來

在 webpack.config.js 中配置

require("postcss-px-to-viewport")({
  unitToConvert: "px",    //需要轉換的單位，默認為"px"
  viewportWidth: 750,   // 視窗的寬度，對應的是我們設計稿的寬度，一般是750
  unitPrecision: 3,       //單位轉換后保留的精度
  propList: [     //能轉化為vw的屬性列表
    "*"
  ],
  viewportUnit: "vw",     // 希望使用的視口單位
  fontViewportUnit: "vw",     //字體使用的視口單位
  selectorBlackList: [],  //需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
  minPixelValue: 1,       //設置最小的轉換數值，如果為1的話，只有大於1的值會被轉換
  mediaQuery: false,      //媒體查詢里的單位是否需要轉換單位
  replace: true,      //是否直接更換屬性值，而不添加備用屬性
  exclude: /(\/|\\)(node_modules)(\/|\\)/,        //忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
})