React + Ant Design 中使用 postcss-px-to-viewport 实现响应式布局

在 React + Ant Design 中使用 postcss-px-to-viewport，可以通过创建一个 postcss.config.js 文件来配置。以下是一个示例代码：

1. 首先，安装相关的包：

npm install postcss-px-to-viewport --save-dev
npm install postcss-loader --save-dev

2. 在项目根目录下创建 postcss.config.js 文件，配置 postcss-px-to-viewport：

module.exports = {
  plugins: [
    require('postcss-px-to-viewport')({
      viewportWidth: 750, // 设计稿的宽度
      unitPrecision: 5, // 单位转换后保留的小数位数
      viewportUnit: 'vw', // 转换成的视窗单位
      selectorBlackList: ['.ignore'], // 需要忽略的 CSS 选择器
      minPixelValue: 1, // 小于或等于1px不转换为视窗单位
      mediaQuery: false // 允许在媒体查询中转换px
    })
  ]
};

3. 修改 webpack 配置，添加 postcss-loader：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  }
};

4. 在 React 组件中引入 antd 的样式文件：

import 'antd/dist/antd.css';

5. 在 React 组件中使用 px 单位，postcss-px-to-viewport 会自动转换为 vw 单位：

import React from 'react';
import './YourComponent.css';

const YourComponent = () => {
  return (
    <div className='container'>
      <div className='content'>Hello World</div>
    </div>
  );
};

export default YourComponent;

6. 创建 YourComponent.css 文件，在其中编写样式：

.container {
  width: 750px;
  height: 100px;
  background-color: #ccc;
}

.content {
  width: 375px;
  height: 50px;
  font-size: 24px;
  margin: 0 auto;
  line-height: 50px;
  text-align: center;
}

以上代码示例中，postcss-px-to-viewport 会将 .px 单位自动转换为 .vw 单位，以适应不同设备的屏幕尺寸。