react如何使用px2rem

使用 px2rem 在 React 项目中

在 React 项目中实现 px 到 rem 的转换，可以通过以下方法完成：

安装 postcss-px2rem

通过 npm 或 yarn 安装 postcss-px2rem 插件：

npm install postcss-px2rem --save-dev

或

yarn add postcss-px2rem --dev

配置 webpack

在 webpack 配置文件中添加 postcss-px2rem 插件：

const px2rem = require('postcss-px2rem');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [px2rem({ remUnit: 75 })]
              }
            }
          }
        ]
      }
    ]
  }
};

设置根字体大小

在 HTML 文件中动态设置根字体大小，通常以 750 设计稿为例：

document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';

使用 CSS 预处理器

如果使用 Sass 或 Less，配置类似：

{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [px2rem({ remUnit: 75 })]
        }
      }
    },
    'sass-loader'
  ]
}

直接使用 lib-flexible

另一种方法是结合 lib-flexible 自动转换：

npm install lib-flexible --save

在入口文件中引入：

import 'lib-flexible';

使用 craco 覆盖 create-react-app 配置

对于 create-react-app 创建的项目，使用 craco 覆盖配置：

npm install @craco/craco craco-postcss --save-dev

创建 craco.config.js：

module.exports = {
  style: {
    postcss: {
      plugins: [require('postcss-px2rem')({ remUnit: 75 })]
    }
  }
};

以上方法可以根据项目需求选择合适的方式实现 px 到 rem 的转换，确保页面在不同设备上的适配性。