feat: unocss 配置说明

src/pages/index/about.vue

@@ -11,7 +11,7 @@
     class="bg-white overflow-hidden pt-2 px-4"
     :style="{ marginTop: safeAreaInsets?.top + 'px' }"
   >
-    <view class="text-center text-3xl mt-4">关于页面</view>
+    <view class="text-center text-3xl mt-4 test-css">关于页面</view>
     <view class="text-center text-3xl mt-8">
       鸽友们好，我是
       <text class="text-red-500">菲鸽</text>
@@ -37,7 +37,8 @@ const gotoPage = (page: string) => {
 </script>
 
 <style lang="scss" scoped>
-.desc {
-  height: 80rpx;
+.test-css {
+  // mt-4=>1rem=>16px;
+  margin-top: 16px;
 }
 </style>

uno.config.ts

@@ -80,6 +80,13 @@ export default defineConfig({
 
 /**
  * 最终这一套组合下来会得到：
- * mp 里面：mt-4 => margin-top: 32rpx
- * h5 里面：mt-4 => margin-top: 1rem
+ * mp 里面：mt-4 => margin-top: 32rpx  == 16px
+ * h5 里面：mt-4 => margin-top: 1rem == 16px
+ *
+ * 另外，我们还可以推算出 UnoCSS 单位与设计稿差别4倍。
+ * 375 * 4 = 1500，把设计稿设置为1500，那么设计稿里多少px，unocss就写多少述职。
+ * 举个例子，设计稿显示某元素宽度100px，就写w-100即可。
+ *
+ * 如果是传统方式写样式，则推荐设计稿设置为 750，这样设计稿1px，代码写1rpx。
+ * rpx是响应式的，可以让不同设备的屏幕显示效果保持一致。
  */