From 9ff0fae36c77c2899972a1c5ba566ba862c6044a Mon Sep 17 00:00:00 2001 From: Cano1997 <1978141412@qq.com> Date: Wed, 26 Nov 2025 19:55:36 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4px=E5=8D=95=E4=BD=8D?= =?UTF-8?q?=E4=B8=BArem=EF=BC=8C=E5=B9=B6=E6=B7=BB=E5=8A=A0=E5=90=84?= =?UTF-8?q?=E5=83=8F=E7=B4=A0=E5=AA=92=E4=BD=93=E6=9F=A5=E8=AF=A2=E6=A0=B9?= =?UTF-8?q?=E8=8A=82=E7=82=B9=E5=AD=97=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mob-theme/src/theme/elements/index.scss | 33 ++++++++++ .../src/theme/theme/dark/dark-theme.scss | 62 +++++++++---------- .../src/theme/theme/light/light-theme.scss | 60 +++++++++--------- 3 files changed, 94 insertions(+), 61 deletions(-) diff --git a/packages/mob-theme/src/theme/elements/index.scss b/packages/mob-theme/src/theme/elements/index.scss index 59038ca..194b692 100644 --- a/packages/mob-theme/src/theme/elements/index.scss +++ b/packages/mob-theme/src/theme/elements/index.scss @@ -32,4 +32,37 @@ div::-webkit-scrollbar { div::-webkit-scrollbar-thumb { background: getCssVar(color, tertiary, light, active); +} + +// 小型移动设备 +@media screen and (min-width: 320px) { + html{ + font-size: 12px; + } +} +// 中型移动设备 +@media screen and (min-width: 375px) { + html{ + font-size: 14px; + } +} +// 大型移动设备 +@media screen and (min-width: 425px) { + html { font-size: 16px; } +} +// 平板电脑 +@media screen and (min-width: 768px) { + html { font-size: 18px; } +} +// 笔记本电脑 +@media screen and (min-width: 1024px) { + html { + font-size: 20px; + } +} +// 大型笔记本电脑 +@media screen and (min-width: 1440px) { + html { + font-size: 24px; + } } \ No newline at end of file diff --git a/packages/mob-theme/src/theme/theme/dark/dark-theme.scss b/packages/mob-theme/src/theme/theme/dark/dark-theme.scss index c8377bd..b57f5a4 100644 --- a/packages/mob-theme/src/theme/theme/dark/dark-theme.scss +++ b/packages/mob-theme/src/theme/theme/dark/dark-theme.scss @@ -306,17 +306,17 @@ // 阴影 #{getCssVarName(color, shadow)}: rgba(var(#{getCssVarName(black)}), 0.04); // 用于模拟描边的阴影颜色 #{getCssVarName(shadow, elevated)}: - inset 0 0 0 1px rgb(255 255 255 / 10%), 0 4px 14px rgb(0 0 0 / 25%); // 用于toast, modal, popover等需要提升层级的界面元素 + inset 0 0 0 1px rgb(255 255 255 / 10%), 0 rem(4px) rem(14px) rgb(0 0 0 / 25%); // 用于toast, modal, popover等需要提升层级的界面元素 // 字号 - #{getCssVarName('font-size', 'small')}: 12px; - #{getCssVarName('font-size', 'regular')}: 14px; - #{getCssVarName('font-size', 'header-6')}: 16px; - #{getCssVarName('font-size', 'header-5')}: 18px; - #{getCssVarName('font-size', 'header-4')}: 20px; - #{getCssVarName('font-size', 'header-3')}: 24px; - #{getCssVarName('font-size', 'header-2')}: 28px; - #{getCssVarName('font-size', 'header-1')}: 32px; + #{getCssVarName('font-size', 'small')}: rem(12px); + #{getCssVarName('font-size', 'regular')}: rem(14px); + #{getCssVarName('font-size', 'header-6')}: rem(16px); + #{getCssVarName('font-size', 'header-5')}: rem(18px); + #{getCssVarName('font-size', 'header-4')}: rem(20px); + #{getCssVarName('font-size', 'header-3')}: rem(24px); + #{getCssVarName('font-size', 'header-2')}: rem(28px); + #{getCssVarName('font-size', 'header-1')}: rem(32px); // 字重 #{getCssVarName('font-weight', 'light')}: 200; @@ -324,17 +324,17 @@ #{getCssVarName('font-weight', 'bold')}: 800; // 圆角 - #{getCssVarName(border, radius, extra, small)}: 2px; // 超小圆角，用于 checkbox 内圆角 - #{getCssVarName(border, radius, small)}: 4px; // 小圆角, 用于 button、tag、tabs 等大多数组件, 比较常用 - #{getCssVarName(border, radius, medium)}: 8px; // 中圆角, 用于 dropdown、scrollist、transfer 等菜单类组件 - #{getCssVarName(border, radius, large)}: 12px; // 大圆角, 用于 modal + #{getCssVarName(border, radius, extra, small)}: rem(2px); // 超小圆角，用于 checkbox 内圆角 + #{getCssVarName(border, radius, small)}: rem(4px); // 小圆角, 用于 button、tag、tabs 等大多数组件, 比较常用 + #{getCssVarName(border, radius, medium)}: rem(8px); // 中圆角, 用于 dropdown、scrollist、transfer 等菜单类组件 + #{getCssVarName(border, radius, large)}: rem(12px); // 大圆角, 用于 modal #{getCssVarName(border, radius, circle)}: 50%; // 全圆角, 用于 avatar, badge 等组件 - #{getCssVarName(border, radius, full)}: 9999px; // 用于创建全尺寸圆角，如胶囊标签等 + #{getCssVarName(border, radius, full)}: rem(9999px); // 用于创建全尺寸圆角，如胶囊标签等 // 高度 - #{getCssVarName('height-control', 'small')}: 24px; - #{getCssVarName('height-control', 'default')}: 32px; - #{getCssVarName('height-control', 'large')}: 40px; + #{getCssVarName('height-control', 'small')}: rem(24px); + #{getCssVarName('height-control', 'default')}: rem(32px); + #{getCssVarName('height-control', 'large')}: rem(40px); // 描边尺寸 #{getCssVarName('border-thickness')}: 0; @@ -342,21 +342,21 @@ #{getCssVarName('border-thickness', 'control-focus')}: 1px; // 图标尺寸 - #{getCssVarName('width-icon', 'extra-small')}: 8px; - #{getCssVarName('width-icon', 'small')}: 12px; - #{getCssVarName('width-icon', 'medium')}: 16px; - #{getCssVarName('width-icon', 'large')}: 20px; - #{getCssVarName('width-icon', 'extra-large')}: 24px; + #{getCssVarName('width-icon', 'extra-small')}: rem(8px); + #{getCssVarName('width-icon', 'small')}: rem(12px); + #{getCssVarName('width-icon', 'medium')}: rem(16px); + #{getCssVarName('width-icon', 'large')}: rem(20px); + #{getCssVarName('width-icon', 'extra-large')}: rem(24px); // 间距 #{getCssVarName('spacing', 'none')}: 0; - #{getCssVarName('spacing', 'super-tight')}: 2px; - #{getCssVarName('spacing', 'extra-tight')}: 4px; - #{getCssVarName('spacing', 'tight')}: 8px; - #{getCssVarName('spacing', 'base-tight')}: 12px; - #{getCssVarName('spacing', 'base')}: 16px; - #{getCssVarName('spacing', 'base-loose')}: 20px; - #{getCssVarName('spacing', 'loose')}: 24px; - #{getCssVarName('spacing', 'extra-loose')}: 32px; - #{getCssVarName('spacing', 'super-loose')}: 40px; + #{getCssVarName('spacing', 'super-tight')}: rem(2px); + #{getCssVarName('spacing', 'extra-tight')}: rem(4px); + #{getCssVarName('spacing', 'tight')}: rem(8px); + #{getCssVarName('spacing', 'base-tight')}: rem(12px); + #{getCssVarName('spacing', 'base')}: rem(16px); + #{getCssVarName('spacing', 'base-loose')}: rem(20px); + #{getCssVarName('spacing', 'loose')}: rem(24px); + #{getCssVarName('spacing', 'extra-loose')}: rem(32px); + #{getCssVarName('spacing', 'super-loose')}: rem(40px); } \ No newline at end of file diff --git a/packages/mob-theme/src/theme/theme/light/light-theme.scss b/packages/mob-theme/src/theme/theme/light/light-theme.scss index f786e14..1c2617f 100644 --- a/packages/mob-theme/src/theme/theme/light/light-theme.scss +++ b/packages/mob-theme/src/theme/theme/light/light-theme.scss @@ -308,17 +308,17 @@ #{getCssVarName(color, shadow)}: rgba(var(#{getCssVarName(black)}), 0.04); // 用于模拟描边的阴影颜色 #{getCssVarName(shadow, elevated)}: 0 0 1px rgba(0 0 0 / 30%), - 0 4px 14px rgba(0 0 0 / 10%); // 用于toast, modal, popover等需要提升层级的界面元素 + 0 rem(4px) rem(14px) rgba(0 0 0 / 10%); // 用于toast, modal, popover等需要提升层级的界面元素 // 字号 - #{getCssVarName('font-size', 'small')}: 12px; - #{getCssVarName('font-size', 'regular')}: 14px; - #{getCssVarName('font-size', 'header-6')}: 16px; - #{getCssVarName('font-size', 'header-5')}: 18px; - #{getCssVarName('font-size', 'header-4')}: 20px; - #{getCssVarName('font-size', 'header-3')}: 24px; - #{getCssVarName('font-size', 'header-2')}: 28px; - #{getCssVarName('font-size', 'header-1')}: 32px; + #{getCssVarName('font-size', 'small')}: rem(12px); + #{getCssVarName('font-size', 'regular')}: rem(14px); + #{getCssVarName('font-size', 'header-6')}: rem(16px); + #{getCssVarName('font-size', 'header-5')}: rem(18px); + #{getCssVarName('font-size', 'header-4')}: rem(20px); + #{getCssVarName('font-size', 'header-3')}: rem(24px); + #{getCssVarName('font-size', 'header-2')}: rem(28px); + #{getCssVarName('font-size', 'header-1')}: rem(32px); // 字重 #{getCssVarName('font-weight', 'light')}: 200; @@ -326,17 +326,17 @@ #{getCssVarName('font-weight', 'bold')}: 800; // 圆角 - #{getCssVarName(border, radius, extra, small)}: 2px; // 超小圆角，用于 checkbox 内圆角 - #{getCssVarName(border, radius, small)}: 4px; // 小圆角, 用于 button、tag、tabs 等大多数组件, 比较常用 - #{getCssVarName(border, radius, medium)}: 8px; // 中圆角, 用于 dropdown、scrollist、transfer 等菜单类组件 - #{getCssVarName(border, radius, large)}: 12px; // 大圆角, 用于 modal + #{getCssVarName(border, radius, extra, small)}: rem(2px); // 超小圆角，用于 checkbox 内圆角 + #{getCssVarName(border, radius, small)}: rem(4px); // 小圆角, 用于 button、tag、tabs 等大多数组件, 比较常用 + #{getCssVarName(border, radius, medium)}: rem(8px); // 中圆角, 用于 dropdown、scrollist、transfer 等菜单类组件 + #{getCssVarName(border, radius, large)}: rem(12px); // 大圆角, 用于 modal #{getCssVarName(border, radius, circle)}: 50%; // 全圆角, 用于 avatar, badge 等组件 #{getCssVarName(border, radius, full)}: 9999px; // 用于创建全尺寸圆角，如胶囊标签等 // 高度 - #{getCssVarName('height-control', 'small')}: 24px; - #{getCssVarName('height-control', 'default')}: 32px; - #{getCssVarName('height-control', 'large')}: 40px; + #{getCssVarName('height-control', 'small')}: rem(24px); + #{getCssVarName('height-control', 'default')}: rem(32px); + #{getCssVarName('height-control', 'large')}: rem(40px); // 描边尺寸 #{getCssVarName('border-thickness')}: 0; @@ -344,21 +344,21 @@ #{getCssVarName('border-thickness', 'control-focus')}: 1px; // 图标尺寸 - #{getCssVarName('width-icon', 'extra-small')}: 8px; - #{getCssVarName('width-icon', 'small')}: 12px; - #{getCssVarName('width-icon', 'medium')}: 16px; - #{getCssVarName('width-icon', 'large')}: 20px; - #{getCssVarName('width-icon', 'extra-large')}: 24px; + #{getCssVarName('width-icon', 'extra-small')}: rem(8px); + #{getCssVarName('width-icon', 'small')}: rem(12px); + #{getCssVarName('width-icon', 'medium')}: rem(16px); + #{getCssVarName('width-icon', 'large')}: rem(20px); + #{getCssVarName('width-icon', 'extra-large')}: rem(24px); // 间距 #{getCssVarName('spacing', 'none')}: 0; - #{getCssVarName('spacing', 'super-tight')}: 2px; - #{getCssVarName('spacing', 'extra-tight')}: 4px; - #{getCssVarName('spacing', 'tight')}: 8px; - #{getCssVarName('spacing', 'base-tight')}: 12px; - #{getCssVarName('spacing', 'base')}: 16px; - #{getCssVarName('spacing', 'base-loose')}: 20px; - #{getCssVarName('spacing', 'loose')}: 24px; - #{getCssVarName('spacing', 'extra-loose')}: 32px; - #{getCssVarName('spacing', 'super-loose')}: 40px; + #{getCssVarName('spacing', 'super-tight')}: rem(2px); + #{getCssVarName('spacing', 'extra-tight')}: rem(4px); + #{getCssVarName('spacing', 'tight')}: rem(8px); + #{getCssVarName('spacing', 'base-tight')}: rem(12px); + #{getCssVarName('spacing', 'base')}: rem(16px); + #{getCssVarName('spacing', 'base-loose')}: rem(20px); + #{getCssVarName('spacing', 'loose')}: rem(24px); + #{getCssVarName('spacing', 'extra-loose')}: rem(32px); + #{getCssVarName('spacing', 'super-loose')}: rem(40px); } \ No newline at end of file -- Gitee