From b76a322f9fe99199b61994ac73801400e97dfa36 Mon Sep 17 00:00:00 2001
From: Wuxh <wxh1220@gmail.com>
Date: Mon, 17 Jul 2023 15:08:44 +0800
Subject: [PATCH] docs: supplement `px2rem` docs (#43594)

* docs: supplement `px2rem` docs

* chore: update
---
 docs/react/compatible-style.en-US.md | 50 ++++++++++++++++++++++++++++
 docs/react/compatible-style.zh-CN.md | 50 ++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+)

diff --git a/docs/react/compatible-style.en-US.md b/docs/react/compatible-style.en-US.md
index d00c4629f6..80878e8a29 100644
--- a/docs/react/compatible-style.en-US.md
+++ b/docs/react/compatible-style.en-US.md
@@ -71,3 +71,53 @@ When toggled, styles will downgrade CSS logical properties:
 ++ left: 0;
 }
 ```
+
+### Rem Adaptation
+
+In responsive web development, there is a need for a convenient and flexible way to achieve page adaptation and responsive design. The `px2remTransformer` transformer can quickly and accurately convert pixel units in style sheets to rem units relative to the root element (HTML tag), enabling the implementation of adaptive and responsive layouts.
+
+```tsx
+import { StyleProvider, px2remTransformer } from '@ant-design/cssinjs';
+
+const px2rem = px2remTransformer({
+  rootValue: 32, // 32px = 1rem; @default 16
+});
+
+export default () => (
+  <StyleProvider transformers={[px2rem]}>
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+The resulting transformed styles:
+
+```diff
+ .px2rem-box {
+-  width: 400px;
++  width: 12.5rem;
+   background-color: green;
+-  font-size: 32px;
++  font-size: 1rem;
+   border: 10PX solid #f0f;
+ }
+
+ @media only screen and (max-width: 600px) {
+   .px2rem-box {
+     background-color: red;
+-    margin: 10px;
++    margin: 0.3125rem;
+   }
+ }
+```
+
+#### Options
+
+<!-- prettier-ignore -->
+| Parameter | Description  | Type | Default |
+| --- | --- | --- | --- |
+| rootValue | Font size of the root element | `number` | 16 |
+| precision | Decimal places for the converted value | `number` | 5 |
+| mediaQuery | Whether to convert px in media queries | `boolean` | false |
+
+For more details, please refer to: [px2rem.ts#Options](https://github.com/ant-design/cssinjs/blob/master/src/transformers/px2rem.ts)
diff --git a/docs/react/compatible-style.zh-CN.md b/docs/react/compatible-style.zh-CN.md
index 868fc0830d..1ee317a3c2 100644
--- a/docs/react/compatible-style.zh-CN.md
+++ b/docs/react/compatible-style.zh-CN.md
@@ -71,3 +71,53 @@ export default () => (
 ++ left: 0;
 }
 ```
+
+### rem 适配
+
+在响应式网页开发中，需要一种方便且灵活的方式来实现页面的适配和响应式设计。`px2remTransformer` 转换器可以快速而准确地将样式表中的像素单位转换为相对于根元素（HTML 标签）的 rem 单位，实现页面的自适应和响应式布局。
+
+```tsx
+import { StyleProvider, px2remTransformer } from '@ant-design/cssinjs';
+
+const px2rem = px2remTransformer({
+  rootValue: 32, // 32px = 1rem; @default 16
+});
+
+export default () => (
+  <StyleProvider transformers={[px2rem]}>
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+最终转换后的样式：
+
+```diff
+ .px2rem-box {
+-  width: 400px;
++  width: 12.5rem;
+   background-color: green;
+-  font-size: 32px;
++  font-size: 1rem;
+   border: 10PX solid #f0f;
+ }
+
+ @media only screen and (max-width: 600px) {
+   .px2rem-box {
+     background-color: red;
+-    margin: 10px;
++    margin: 0.3125rem;
+   }
+ }
+```
+
+#### 配置项
+
+<!-- prettier-ignore -->
+| 参数 | 说明  | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| rootValue | 根元素字体大小 | `number` | 16 |
+| precision | 转换后的小数点位数 | `number` | 5 |
+| mediaQuery | 是否转换媒体查询中的 px | `boolean` | false |
+
+详细请参考: [px2rem.ts#Options](https://github.com/ant-design/cssinjs/blob/master/src/transformers/px2rem.ts)