chore: 🔨 update readme

MellowCo · Jul 23, 2022 · f9b589e · f9b589e
1 parent 76d943e
commit f9b589e
Showing 1 changed file with 72 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -69,73 +69,7 @@ import 'uno.css'
 
 
 ---
-## 注意事项
-
-**小程序不支持使用`\\`，`\:`，`\[`，`\$`,`\.`等转义类名，可通过[插件](https://github.com/MellowCo/unplugin-transform-wx-class)转换支持**
-
-> 不支持`% ` h-1.000%
-
-> 不支持`/`，可以将`/`改为`_`  h-1/2 => h-1_2
-
-> 不支持`[] `  bg-[#153]/10
-
-> 不支持`$var` h-$var
-
-> 不支持`:`  bg-teal-300:50
-
-## 使用class转换插件
-
-> 使用[unplugin-transform-wx-class](https://github.com/MellowCo/unplugin-transform-wx-class)，转换`\\`，`\:`，`\[`，`\$`,`\.`等转义类名
-
-![image-20220703141301371](https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207031413496.png)
-
-
----
-### taro h5兼容
-* `taro`不会像`uniapp`将css编译各平台需要的单位，如小程序使用`rpx`，h5使用`rem`
-  * uniapp 在h5中将`rpx`编译成`rem`
-  <img src="https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207231615696.png" style="zoom:50%;" />
-  * taro 在h5中还是使用`rpx`
-  <img src="https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207231620090.png" style="zoom: 50%;" />
-
-* `taro`需要在`unocss.config.ts`中添加`h5`兼容
-```js
-export default {
-  presets: [
-    presetWxapp({
-      isTaroH5: process.env.TARO_ENV === 'h5',
-      designWidth: 750
-    }),
-  ],
-  shortcuts: [
-    {
-      'border-base': 'border border-gray-500/10',
-      'center': 'flex justify-center items-center',
-    },
-  ]
-}
-```
-
-### taro h5 基准字体
-* 添加兼容代码后，大小显示正常
-
-<img src="https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207231622120.png" alt="image-20220703141451188" style="zoom: 67%;" />
-
-* 但是`taro` h5的375基准的`rem`为`24px`，不是`16px`，导致默认字体很大，。。。。
 
-<img src="https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207231625587.png" style="zoom:50%;" />
-
-> 在`index.html` 中设置body
-
-<img src="https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207231650890.png" style="zoom: 67%;" />
-
-```html
-<body class="text-base">
-  <div id="app"></div>
-</body>
-```
-
-<img src="https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207231629548.png" style="zoom: 50%;" />
 
 ## webpack
 
@@ -347,6 +281,78 @@ import 'uno.css'
 ```
 
 ---
+## 注意事项
+
+**小程序不支持使用`\\`，`\:`，`\[`，`\$`,`\.`等转义类名，可通过[插件](https://github.com/MellowCo/unplugin-transform-wx-class)转换支持**
+
+> 不支持`% ` h-1.000%
+
+> 不支持`/`，可以将`/`改为`_`  h-1/2 => h-1_2
+
+> 不支持`[] `  bg-[#153]/10
+
+> 不支持`$var` h-$var
+
+> 不支持`:`  bg-teal-300:50
+
+### 使用class转换插件
+
+> 使用[unplugin-transform-wx-class](https://github.com/MellowCo/unplugin-transform-wx-class)，转换`\\`，`\:`，`\[`，`\$`,`\.`等转义类名
+
+![image-20220703141301371](https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207031413496.png)
+
+
+
+---
+### taro h5兼容
+* `taro`不会像`uniapp`将css编译各平台需要的单位，如小程序使用`rpx`，h5使用`rem`
+  * uniapp 在h5中将`rpx`编译成`rem`
+  <img src="https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207231615696.png" style="zoom:50%;" />
+  * taro 在h5中还是使用`rpx`
+  <img src="https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207231620090.png" style="zoom: 50%;" />
+
+* `taro`需要在`unocss.config.ts`中添加`h5`兼容
+```js
+export default {
+  presets: [
+    presetWxapp({
+      isTaroH5: process.env.TARO_ENV === 'h5',
+      designWidth: 750
+    }),
+  ],
+  shortcuts: [
+    {
+      'border-base': 'border border-gray-500/10',
+      'center': 'flex justify-center items-center',
+    },
+  ]
+}
+```
+
+
+
+
+---
+### taro h5 基准字体
+* 添加兼容代码后，大小显示正常
+
+<img src="https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207231622120.png" alt="image-20220703141451188" style="zoom: 67%;" />
+
+* 但是`taro` h5的375基准的`rem`为`24px`，不是`16px`，导致默认字体很大，。。。。
+
+<img src="https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207231625587.png" style="zoom:50%;" />
+
+> 在`index.html` 中设置body
+
+<img src="https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207231650890.png" style="zoom: 67%;" />
+
+```html
+<body class="text-base">
+  <div id="app"></div>
+</body>
+```
+
+<img src="https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202207231629548.png" style="zoom: 50%;" />
 
 ##  使用
 [UnoCSS 文档](https://uno.antfu.me/)