From 7d05cea7fef0f2dec61ea2f9d21f546da59e0814 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=B2=E9=B8=BD?= <1020103647@qq.com>
Date: Thu, 2 May 2024 12:14:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20unocss=20=E9=85=8D=E7=BD=AE=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/about.vue |  7 ++++---
 uno.config.ts             | 11 +++++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/pages/index/about.vue b/src/pages/index/about.vue
index 864ca2e..19a99ec 100644
--- a/src/pages/index/about.vue
+++ b/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>
diff --git a/uno.config.ts b/uno.config.ts
index b7f4d08..435d7d8 100644
--- a/uno.config.ts
+++ b/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是响应式的，可以让不同设备的屏幕显示效果保持一致。
  */