umi开启hd后配置 px2rem

为实现不同大小分辨率效果基本一样。

开启高清hd即使用rem单位，会自动把项目中的所有px单位转换为rem单位，并根据屏幕大小自动调节html的基础font-size。

umi 配置:

import { IConfig } from 'umi-types';

import px2rem from 'postcss-plugin-px2rem';

const config: IConfig = {

  plugins: [

    [

      'umi-plugin-react',

      {

        antd: false,

        'antd-mobile': true,

        dva: true,

        dynamicImport: { webpackChunkName: true },

        title: 'demo',

        dll: false,

        hd: true,

        routes: {

          exclude: [ /components\//  ],

        },

      },

    ],

  ],

  extraPostCSSPlugins: [

    px2rem({

      rootValue: 50,

      propBlackList: [],

      selectorBlackList:['t_npx']

    })

  ],

  routes: []

}

属性参数:

{

  rootValue:  50,  //rootValue=designWidth*100/750,此处设计稿为375，所以375*100/750=50

  unitPrecision: 5,

  selectorBlackList: selectorBlackList:['t_npx'],  //以包含t_npx的class不需要转换

  propWhiteList: [],

  propBlackList:['border'], //这些属性不需要转换

  ignoreIdentifier: false,

  replace: true,

  mediaQuery: false,

  minPixelValue: 0

};