From cf620dc8c9c8cb9ff00404240b3fab401b94aefe Mon Sep 17 00:00:00 2001
From: Zzc <1373857752@qq.com>
Date: Fri, 31 Oct 2025 20:19:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(screen):=20=E6=B7=BB=E5=8A=A0=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8FMixin=E4=BB=A5=E9=80=82=E5=BA=94=E5=B1=8F?=
 =?UTF-8?q?=E5=B9=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加SCSS和Less的Mixin，根据设计稿尺寸（宽度1920px，高度982px）将px单位转换为vw/vh单位。包含用于宽度、高度和字体大小转换的函数，以确保响应式设计。将SCSS的Mixin导入主样式索引。
---
 packages/screen/src/styles/index.scss  |  2 ++
 packages/screen/src/styles/mixins.less | 27 ++++++++++++++++++++++++++
 packages/screen/src/styles/mixins.scss | 22 +++++++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 packages/screen/src/styles/mixins.less
 create mode 100644 packages/screen/src/styles/mixins.scss

diff --git a/packages/screen/src/styles/index.scss b/packages/screen/src/styles/index.scss
index efed5c5..f47a101 100644
--- a/packages/screen/src/styles/index.scss
+++ b/packages/screen/src/styles/index.scss
@@ -1,3 +1,5 @@
+@import './mixins.scss';
+
 * {
   margin: 0;
   padding: 0;
diff --git a/packages/screen/src/styles/mixins.less b/packages/screen/src/styles/mixins.less
new file mode 100644
index 0000000..3a67193
--- /dev/null
+++ b/packages/screen/src/styles/mixins.less
@@ -0,0 +1,27 @@
+// 屏幕适配工具 (Less 版本)
+// 设计稿基准：1920px (宽) × 982px (高，不含头部)
+
+// 设计稿基准值
+@design-width: 1920;
+@design-height: 982;
+
+// 将 px 转换为 vw (基于设计稿宽度 1920px)
+.vw(@px) {
+  @vw-value: (@px / @design-width * 100vw);
+}
+
+// 将 px 转换为 vh (基于设计稿内容区域高度 982px)
+.vh(@px) {
+  @vh-value: (@px / @design-height * 100vh);
+}
+
+// 字体大小转换 (使用 vw 确保响应式)
+.fs(@px) {
+  @fs-value: (@px / @design-width * 100vw);
+}
+
+// 由于 Less 的限制，直接使用 calc() 表达式更简单
+// 使用示例（推荐方式）：
+// width: calc(580 / 1920 * 100vw);
+// height: calc(400 / 982 * 100vh);
+// font-size: calc(16 / 1920 * 100vw);
diff --git a/packages/screen/src/styles/mixins.scss b/packages/screen/src/styles/mixins.scss
new file mode 100644
index 0000000..276c69a
--- /dev/null
+++ b/packages/screen/src/styles/mixins.scss
@@ -0,0 +1,22 @@
+// 屏幕适配工具
+// 设计稿基准：1920px (宽) × 982px (高，不含头部)
+
+// 将 px 转换为 vw (基于设计稿宽度 1920px)
+@function vw($px) {
+  @return calc($px / 1920 * 100vw);
+}
+
+// 将 px 转换为 vh (基于设计稿内容区域高度 982px)
+@function vh($px) {
+  @return calc($px / 982 * 100vh);
+}
+
+// 字体大小转换 (使用 vw 确保响应式)
+@function fs($px) {
+  @return calc($px / 1920 * 100vw);
+}
+
+// 使用示例：
+// width: vw(580);      // 580px → vw
+// height: vh(400);     // 400px → vh
+// font-size: fs(16);   // 16px → vw