react自适应布局 px转rem

使用lib-flexible更新html的 font-size

• 默认情况下1rem等于html根节点的font-size

npm i lib-flexible

• 在index.js中引入

import 'lib-flexible'

使用postcss-plugin-px2rem 将px转为rem

• 安装

npm i postcss-plugin-px2rem

1.如果你是用creat-react-app搭建npm run eject打开webpack详细配置

npm run eject

• 找到config/webpack.config.js里postcss-loader

                 [
                    'postcss-plugin-px2rem',
                    {
                        rootValue: 100,
                        unitPrecision: 5,
                        propWhiteList: [],
                        propBlackList: [],
                        exclude: ['/node_modules/'],
                        selectorBlackList: ['noRem'],
                        ignoreIdentifier: false,
                        replace: true,
                        mediaQuery: false,
                        minPixelValue: 10
                    }
                  ]

• 如果是老版本的plugins里用的是require，则require('postcss-plugin-px2rem')({...options})
• 现在运行项目px转为了rem，那么恭喜你

2.常规webpack

import px2rem from 'postcss-plugin-px2rem';
const px2remOpts = {
  ......
};
 
export default {
  module: {
    loaders: [
      {
        test: /.css$/,
        loader: 'style-loader!css-loader!postcss-loader',
      },
    ],
  },
  postcss: [px2rem(px2remOpts)],
}