From f54d05104445312a960c45da5c7e897e5036ac44 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sun, 30 Mar 2025 20:27:17 +0800
Subject: [PATCH] docs: 文档调整
---
README.md | 46 ++++++++++------------------------------------
1 files changed, 10 insertions(+), 36 deletions(-)
diff --git a/README.md b/README.md
index af431a6..87d8915 100644
--- a/README.md
+++ b/README.md
@@ -124,57 +124,31 @@
│ │ ├── HomeBottomLink.vue # 首页底部链接组件
```
-## **样式规范说明**
+## **屏幕适配说明**
-本项目的适配策略如下：
-
-- **宽度适配**：采用 `rem`，使用 `postcss-pxtorem` 插件自动转换。
-- **高度适配**：采用 `vh`，需使用 `hToV()` 方法进行转换。
-- **字体大小适配**：同样使用 `wToR()` 方法，以保证不同屏幕下的良好显示效果。
-
-------
-
-### **📌 类名中的样式**
-
-- **宽度**：自动转换为 `rem`，无需额外处理。
-- **高度**：需要使用 `hToV()` 方法进行转换。
+本项目的适配策略如下：采用 `rem`，使用 `postcss-pxtorem` 插件自动转换。
示例：
```
-<style scoped lang="scss">
- height: hToV(100); // 100px 转换为 vh
- width: 100px; // 自动转换为 rem
-</style>
-```
-
-------
-
-### **📌 行内样式或 JavaScript 动态设置样式**
-
-- **高度**：使用 `hToV()` 进行 `vh` 适配。
-- **宽度**：使用 `wToR()` 进行 `rem` 适配。
-
-示例：
-
-```
-<div :style="{ height: hToV(50), width: wToR(50) }">test</div>
+<div :style="{ height: pxToRem(50), width: pxToRem(50) }">test</div>
<script>
-import { hToV, wToR } from '@/utils/pxConver';
+import { pxToRem } from '@/utils/rem';
export default {
mounted() {
- this.style = { height: hToV(50), width: wToR(50) };
+ this.style = { height: pxToRem(50), width: pxToRem(50) };
},
};
</script>
+
+<style scoped lang="scss">
+ height: 100px; // 自动转换为 10rem
+ width: 100px; // 自动转换为10rem
+</style>
```
-------
-### **📌 字体大小特别说明**
-
-如果需要设置 **字体大小**，也应使用 `wToR()` 进行转换，以确保在不同分辨率设备上表现一致。
## **SVG 图标使用指南**
--
Gitblit v1.9.3