From ee831387e2bc235547808c333282e5c24c6a1717 Mon Sep 17 00:00:00 2001
From: wan gang <wang@axon.com.cn>
Date: Tue, 9 Apr 2019 16:45:05 +0800
Subject: [PATCH] doc: add rem document

---
 docs/en/development/rem.md    | 27 +++++++++++++++++++++++++++
 docs/src/summary.js           |  3 +++
 docs/zh-CN/development/rem.md | 27 +++++++++++++++++++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 docs/en/development/rem.md
 create mode 100644 docs/zh-CN/development/rem.md

diff --git a/docs/en/development/rem.md b/docs/en/development/rem.md
new file mode 100644
index 000000000..1b74322b6
--- /dev/null
+++ b/docs/en/development/rem.md
@@ -0,0 +1,27 @@
+---
+title: rem 适配
+---
+
+# rem 适配
+
+VUX项目使用`px`作为基本单位，如果您的项目中需要使用到`rem`单位，可以使用以下两个工具来转化
+
+- [postcss-plugin-px2rem](https://github.com/pigcan/postcss-plugin-px2rem)，PostCSS插件，用于从px生成rem
+- [lib-flexible](https://github.com/amfe/lib-flexible)，设置rem基准值
+
+具体设置可以参考下面的代码
+```js
+module.exports = {
+  'plugins': {
+    // to edit target browsers: use "browserslist" field in package.json
+    'postcss-import': {},
+    'autoprefixer': {},
+    'postcss-plugin-px2rem': {
+      rootValue: 75, // 这里对应的是750的设计图尺寸
+      selectorBlackList: ['html'],
+      exclude: /node_modules|vux/i, // 过滤vux文件夹
+      propBlackList: ['border-radius', 'border'] // 不需要转化为rem的属性
+    }
+  }
+}
+```
diff --git a/docs/src/summary.js b/docs/src/summary.js
index f29939ce2..062fa98d4 100644
--- a/docs/src/summary.js
+++ b/docs/src/summary.js
@@ -84,6 +84,9 @@ module.exports = [{
   }, {
     title: '禁用 eslint',
     path: '/zh-CN/development/vue-loader-disable-eslint.html'
+  }, {
+    title: 'rem 适配',
+    path: '/zh-CN/development/rem.html'
   }]
 },
 {
diff --git a/docs/zh-CN/development/rem.md b/docs/zh-CN/development/rem.md
new file mode 100644
index 000000000..1b74322b6
--- /dev/null
+++ b/docs/zh-CN/development/rem.md
@@ -0,0 +1,27 @@
+---
+title: rem 适配
+---
+
+# rem 适配
+
+VUX项目使用`px`作为基本单位，如果您的项目中需要使用到`rem`单位，可以使用以下两个工具来转化
+
+- [postcss-plugin-px2rem](https://github.com/pigcan/postcss-plugin-px2rem)，PostCSS插件，用于从px生成rem
+- [lib-flexible](https://github.com/amfe/lib-flexible)，设置rem基准值
+
+具体设置可以参考下面的代码
+```js
+module.exports = {
+  'plugins': {
+    // to edit target browsers: use "browserslist" field in package.json
+    'postcss-import': {},
+    'autoprefixer': {},
+    'postcss-plugin-px2rem': {
+      rootValue: 75, // 这里对应的是750的设计图尺寸
+      selectorBlackList: ['html'],
+      exclude: /node_modules|vux/i, // 过滤vux文件夹
+      propBlackList: ['border-radius', 'border'] // 不需要转化为rem的属性
+    }
+  }
+}
+```