diff --git a/packages/mob-theme/src/theme/elements/index.scss b/packages/mob-theme/src/theme/elements/index.scss index 59038cafd2623d64f99c80097e20b6b39a4cb317..194b692916820af2026a2ed0da15cad11ec5ca62 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 c8377bd83ac77e1631b7f9666fd79e22f86664cd..b57f5a4663b4945ed3b8141d97c163c7d3627613 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 f786e14273a1ed51af5aef7b2ef7410e02c4a64e..1c2617f03ca4f9676e7ebc215cb01ca33035ac7e 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