1. 在 React 项目中的详细使用

amfe-flexible 主要用于移动端适配，结合 postcss-pxtorem 实现自动 px 转 rem。以下是 React 项目 中的完整配置流程：

---

1.1 安装依赖

npm install amfe-flexible postcss-pxtorem --save
# 如果使用 Create React App (CRA)，需额外安装 CRACO 或 eject 以修改 PostCSS 配置
npm install @craco/craco --save-dev

CRA 的设计理念与配置封装
CRA 是一个用于快速创建 React 应用的工具，它的核心目标是让开发者能专注于编写代码，而非花费大量时间在构建配置上。所以，CRA 把 Webpack、Babel、PostCSS 等构建工具的配置都封装起来，以默认配置提供给开发者使用。这种做法对初学者友好，能让他们迅速上手开发。但这也意味着默认情况下，开发者无法直接访问和修改这些底层配置。

---

1.2 配置 amfe-flexible

在入口文件 src/global.ts 中引入：

import 'amfe-flexible'; // 动态计算 rem 基准值

1.3 配置 PostCSS（自动 px → rem）

为何需要修改 PostCSS 配置 ?
PostCSS 是一个用 JavaScript 编写的工具，用于将 CSS 转换为另一种 CSS，常结合插件一起使用，像 autoprefixer （自动添加浏览器前缀）、 cssnano （压缩 CSS 代码）等。在实际开发中，可能需要根据项目需求定制 PostCSS 配置，例如添加自定义插件、调整插件选项等。

方案 A：使用 CRACO（推荐，无需 eject）

为什么?

- 原理 ：CRACO 是一个用于覆盖 CRA 默认配置的工具，它不会像 eject 那样把所有配置文件暴露出来，而是提供了一种更轻量级的方式来修改配置。通过创建一个 craco.config.js 文件，在其中定义需要覆盖的配置项，就可以在不破坏 CRA 封装性的前提下修改 PostCSS 配置。
- 优点 ：操作相对简单，不会让项目变得复杂，也方便后续 CRA 版本更新时接收官方的默认配置更新。

1. 创建 craco.config.js：

   module.exports = {
     style: {
       postcss: {
         plugins: [
           require('postcss-pxtorem')({
             rootValue: 75, // 设计稿宽度/10（如 750px 设计稿则为 75）
             propList: ['*'], // 转换所有属性
             selectorBlackList: ['no-rem','antd'], // 过滤 .no-rem 开头的类名和antd组件
           }),
         ],
       },
     },
   };

2. 修改 package.json 的 scripts：

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test"
   }

     

方案 B：Eject 后直接修改 postcss.config.js（不推荐）

为什么?

- 原理 ： eject 是 CRA 提供的一个命令，执行后会把所有隐藏的配置文件和依赖项暴露到项目的根目录下，包括 Webpack、Babel、PostCSS 等配置。这样开发者就可以完全掌控这些配置，按照自己的需求进行修改。
- 缺点 ：这是一个不可逆的操作，一旦执行 eject ，就无法再享受 CRA 自动更新默认配置的便利，后续项目维护和升级的复杂度会增加。

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*'],
    },
  },
};

---

1.4 编写 React 组件（按设计稿写 px）

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

function App() {
  return (
    <div className="container">
      <button className="button">Click Me</button>
    </div>
  );
}

export default App;

在 App.css 中直接使用设计稿的 px 值：

/* 设计稿中 container 宽度为 750px，button 为 200px */
.container {
  width: 750px; /* 编译后 → 10rem (750/75) */
}
.button {
  width: 200px; /* 编译后 → 2.6667rem (200/75) */
  border: 1px solid #333; /* 1px 会被 Retina 屏优化 */
}
.no-rem {
  font-size: 16px; /* 不会被转换为 rem */
}

---

1.5 处理高 DPR（Retina 屏）

amfe-flexible 会自动根据 devicePixelRatio 调整 <meta> 的 initial-scale，解决 Retina 屏下 1px 显示过粗的问题。无需手动干预。

(Retina 屏（视网膜屏幕）是苹果公司创造的一个术语，用于描述具备高像素密度、能够使肉眼无法分辨单个像素的屏幕)

---

2. 核心优点（针对 React 项目）

2.1 开发高效

• 直接按设计稿写 px，编译后自动转为 rem，避免手动计算。

• 适合团队协作，统一适配规则。

2.2 完美适配不同设备

• 动态计算 html 的 font-size，适配从 iPhone 5（320px）到 iPad（1024px）等各种屏幕。

• 自动处理 Retina 屏的 1px 边框问题。

2.3 兼容性优秀

• 支持旧版 Android 和 iOS，比纯 vw 方案更稳定。

• 不依赖 CSS 新特性（如 clamp()），适合保守项目。

2.4 与 React 生态无缝集成

• 通过 PostCSS 插件实现编译时转换，不影响运行时性能。

• 可与 CSS Modules、Styled Components 等方案共存。

---

3. 可能的缺点

3.1 依赖 PostCSS 配置

• 需额外配置 postcss-pxtorem，在 CRA 中需使用 CRACO 或 eject。

3.2 首屏可能闪动（FOUC）

• amfe-flexible 需在 JS 执行后计算 font-size，可能导致短暂样式错乱。
  解决方案：在 public/index.html 中内联关键 CSS。

3.3 现代方案更推荐 vw

• vw 单位无需 JS，纯 CSS 实现适配（如 postcss-px-to-viewport）。

• 但 vw 在低版本浏览器（如 iOS 8）支持较差。

---

4. 替代方案对比

方案	优点	缺点
amfe-flexible + rem	兼容性好，开发简单	依赖 JS，需 PostCSS 配置
vw + postcss-px-to-viewport	纯 CSS，无 JS 依赖	旧浏览器支持差
CSS clamp() + rem	灵活，无需工具链	需手动计算，代码冗余

---

5. 最佳实践建议

1. 新项目：优先尝试 vw + postcss-px-to-viewport（更现代化）。

2. 旧项目维护：继续使用 amfe-flexible，稳定性更高。

3. 需要兼容 iOS 8：坚持 rem 方案，避免 vw 兼容问题。

---

6. 示例项目结构

my-react-app/
├── craco.config.js       # CRACO 配置
├── src/
│   ├── index.js         # 引入 amfe-flexible
│   ├── App.jsx          # React 组件
│   └── App.css          # 按 px 编写，自动转 rem
└── package.json         # 使用 CRACO 启动