From 436da047e48b1813625c62756d4c41ae4a5c2e15 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 19 Apr 2021 20:10:43 +0800
Subject: [PATCH] docs: add rem custom rootValue demo (#8575)

---
 docs/markdown/advanced-usage.en-US.md | 27 +++++++++++++++++++++------
 docs/markdown/advanced-usage.zh-CN.md | 27 +++++++++++++++++++++------
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/docs/markdown/advanced-usage.en-US.md b/docs/markdown/advanced-usage.en-US.md
index aaac564c3..2b3a4a619 100644
--- a/docs/markdown/advanced-usage.en-US.md
+++ b/docs/markdown/advanced-usage.en-US.md
@@ -48,11 +48,9 @@ Vant uses `px` unit by default，you can use tools such as [postcss--px-to-viewp
 PostCSS config example:
 
 ```js
+// postcss.config.js
 module.exports = {
   plugins: {
-    autoprefixer: {
-      browsers: ['Android >= 4.4', 'iOS >= 8'],
-    },
     'postcss-px-to-viewport': {
       viewportWidth: 375,
     },
@@ -72,11 +70,9 @@ You can use tools such as `postcss-pxtorem` to transform `px` unit to `rem` unit
 PostCSS config example:
 
 ```js
+// postcss.config.js
 module.exports = {
   plugins: {
-    autoprefixer: {
-      browsers: ['Android >= 4.0', 'iOS >= 8'],
-    },
     'postcss-pxtorem': {
       rootValue: 37.5,
       propList: ['*'],
@@ -85,6 +81,25 @@ module.exports = {
 };
 ```
 
+### Custom rootValue
+
+If the size of the design draft is 750 or other sizes, you can adjust the `rootValue` to:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    // postcss-pxtorem version >= 5.0.0
+    'postcss-pxtorem': {
+      rootValue({ file }) {
+        return file.indexOf('vant') !== -1 ? 37.5 : 75;
+      },
+      propList: ['*'],
+    },
+  },
+};
+```
+
 ### Adapt to PC Browsers
 
 Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser.
diff --git a/docs/markdown/advanced-usage.zh-CN.md b/docs/markdown/advanced-usage.zh-CN.md
index 62414aec4..e8495c7f1 100644
--- a/docs/markdown/advanced-usage.zh-CN.md
+++ b/docs/markdown/advanced-usage.zh-CN.md
@@ -105,11 +105,9 @@ Vant 默认使用 `px` 作为样式单位，如果需要使用 `viewport` 单位
 下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。
 
 ```js
+// postcss.config.js
 module.exports = {
   plugins: {
-    autoprefixer: {
-      browsers: ['Android >= 4.4', 'iOS >= 8'],
-    },
     'postcss-px-to-viewport': {
       viewportWidth: 375,
     },
@@ -131,11 +129,9 @@ module.exports = {
 下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。
 
 ```js
+// postcss.config.js
 module.exports = {
   plugins: {
-    autoprefixer: {
-      browsers: ['Android >= 4.0', 'iOS >= 8'],
-    },
     'postcss-pxtorem': {
       rootValue: 37.5,
       propList: ['*'],
@@ -144,6 +140,25 @@ module.exports = {
 };
 ```
 
+#### 其他设计稿尺寸
+
+如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 `rootValue` 配置调整为:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    // postcss-pxtorem 插件的版本需要 >= 5.0.0
+    'postcss-pxtorem': {
+      rootValue({ file }) {
+        return file.indexOf('vant') !== -1 ? 37.5 : 75;
+      },
+      propList: ['*'],
+    },
+  },
+};
+```
+
 ### 桌面端适配
 
 Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 `touch` 事件，没有监听桌面端的 `mouse` 事件。