前端适配rem umi react

一、简介

1. lib-flexible 会自动在 html 的 head 中添加一个 meta name=“viewport” 的标签，同时会自动设置html 的 font-size 为屏幕宽度除以 10，也就是 1rem 等于 html 根节点的font-size。假如设计稿的宽度是 750px，此时 1rem 应该等于 75px。假如某个元素的宽度是 150px，那么在 css里面定义这个元素的宽度就是 width: 2rem。但是当分辨率大于某个特定值时，它便不再生效。
2. px2rem-loader 可以自动将 css 中的 px 转换成 rem,但是编译速度会变慢。
   二、步骤
   1.安装插件包

npm install lib-flexible px2rem-loader --save

2.在全局根页面引入

import 'lib-flexible';

3.webpack配置文件中
由于我使用的是umi,所以配置在了config/config.ts

const proem = require('postcss-px2rem');
export default {
  extraPostCSSPlugins: [
    proem({
      // remUnit: 37.5,
      // 相关属性看官网
      remValue: 100, // 根据设计稿设置
      propList: ['*'],
    }),
  ],
}