chore: adjust mobile font

This commit is contained in:
duorameng
2026-04-02 09:15:20 +08:00
parent e3fc9347e8
commit 7c81650d5d
2 changed files with 60 additions and 6 deletions
+54
View File
@@ -230,6 +230,60 @@
} }
} }
/* ========================================
移动端字体独立优化(< 640px)
大屏保持不变,小屏单独增重、优化渲染
======================================== */
@media (max-width: 639px) {
body {
font-size: 15px;
font-weight: 450;
letter-spacing: 0;
/* 移动端关闭 subpixel antialiasing,字体更实更清晰 */
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
/* 标题类字体在小屏下同步增重 */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
letter-spacing: -0.01em;
}
/* 正文段落、描述类文字增重 */
p,
span:not([class*="icon"]),
label,
[class*="description"],
[class*="muted"] {
font-weight: 420;
}
/* 小号字在移动端专门增重,与 Windows 小字优化区分开 */
.text-xs {
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.01em;
}
.text-sm {
font-size: 0.9rem;
font-weight: 450;
letter-spacing: 0;
}
/* 按钮文字增重,更易点击辨识 */
button,
[role="button"] {
font-weight: 500;
}
/* 表格单元格 */
td, th {
font-weight: 430;
}
}
/* 高级感增强 - 微妙的渐变背景 */ /* 高级感增强 - 微妙的渐变背景 */
body { body {
background-color: var(--background); background-color: var(--background);
+6 -6
View File
@@ -19,12 +19,12 @@ const activeTab = ref('password')
</div> </div>
<Tabs v-model="activeTab" class="max-w-2xl"> <Tabs v-model="activeTab" class="max-w-2xl">
<TabsList class="w-full sm:w-auto flex sm:inline-flex h-10 gap-1 p-1 bg-muted/50 rounded-lg overflow-x-auto no-scrollbar"> <TabsList class="w-full grid grid-cols-5 h-auto p-1 bg-muted/50 rounded-lg">
<TabsTrigger value="password" class="flex-1">密码修改</TabsTrigger> <TabsTrigger value="password" class="text-xs sm:text-sm px-1 sm:px-3 py-1.5 whitespace-nowrap">密码修改</TabsTrigger>
<TabsTrigger value="site" class="flex-1">站点设置</TabsTrigger> <TabsTrigger value="site" class="text-xs sm:text-sm px-1 sm:px-3 py-1.5 whitespace-nowrap">站点设置</TabsTrigger>
<TabsTrigger value="scheduler" class="flex-1">调度设置</TabsTrigger> <TabsTrigger value="scheduler" class="text-xs sm:text-sm px-1 sm:px-3 py-1.5 whitespace-nowrap">调度设置</TabsTrigger>
<TabsTrigger value="backup" class="flex-1">备份恢复</TabsTrigger> <TabsTrigger value="backup" class="text-xs sm:text-sm px-1 sm:px-3 py-1.5 whitespace-nowrap">备份恢复</TabsTrigger>
<TabsTrigger value="about" class="flex-1">关于</TabsTrigger> <TabsTrigger value="about" class="text-xs sm:text-sm px-1 sm:px-3 py-1.5 whitespace-nowrap">关于</TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="password" class="mt-6"> <TabsContent value="password" class="mt-6">