npm install postcss postcss-pxtorem --save-dev
npm install amfe-flexible --save

module.exports = {
  plugins: {
    // 兼容瀏覽器，添加前綴
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流瀏覽器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      rootValue: 16, //結(jié)果為：設(shè)計(jì)稿元素尺寸/16，比如元素寬320px,最終頁(yè)面會(huì)換算成 20rem
      propList: ["*"], //是一個(gè)存儲(chǔ)哪些將被轉(zhuǎn)換的屬性列表，這里設(shè)置為['*']全部，假設(shè)需要僅對(duì)邊框進(jìn)行設(shè)置，可以寫['*', '!border*']
      unitPrecision: 5, //保留rem小數(shù)點(diǎn)多少位
      //selectorBlackList: ['.radius'],  //則是一個(gè)對(duì)css選擇器進(jìn)行過濾的數(shù)組，比如你設(shè)置為['fs']，那例如fs-xl類名，里面有關(guān)px的樣式將不被轉(zhuǎn)換，這里也支持正則寫法。
      replace: true, //這個(gè)真不知到干嘛用的。有知道的告訴我一下
      mediaQuery: false, //媒體查詢( @media screen 之類的)中不生效
      minPixelValue: 12, //px小于12的不會(huì)被轉(zhuǎn)換
      // unitToConvert: 'px', // 需要轉(zhuǎn)換的單位，默認(rèn)為"px"
    // viewportWidth: 1920, // 設(shè)計(jì)稿的視口寬度
    // unitPrecision: 5, // 單位轉(zhuǎn)換后保留的精度
    // propList: ['*'], // 能轉(zhuǎn)化為vw的屬性列表
    // viewportUnit: 'vw', // 希望使用的視口單位
    // fontViewportUnit: 'vw', // 字體使用的視口單位
    // selectorBlackList: [], // 需要忽略的CSS選擇器，不會(huì)轉(zhuǎn)為視口單位，使用原有的px等單位。
    // minPixelValue: 1, // 設(shè)置最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有大于1的值會(huì)被轉(zhuǎn)換
    // mediaQuery: false, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位
    // replace: true, //  是否直接更換屬性值，而不添加備用屬性
    // exclude: undefined, // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
    // include: undefined, // 如果設(shè)置了include，那將只有匹配到的文件才會(huì)被轉(zhuǎn)換
    // landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
    // landscapeUnit: 'vw', // 橫屏?xí)r使用的單位
    // landscapeWidth: 1920 // 橫屏?xí)r使用的視口寬度
    },
  },
};