企业官网建设流程全解析

vue3-element-admin 全局字体大小完整指南：3 分钟调好字号与组件尺寸

【免费下载链接】vue3-element-admin🔥基于 Vue 3 + Vite 7+ TypeScript + element-plus 构建的后台管理前端模板（配套后端源码），vue-element-admin 的 vue3 版本。项目地址: https://gitcode.com/GitHub_Trending/vue3/vue3-element-admin

vue3-element-admin 默认正文是 14px、组件高度 34px，小屏上看久了总有人抱怨"字有点小"。调整全局字体大小其实只有两条路：顶栏的尺寸下拉框是"个人即时生效"，改一行默认值或几个 CSS 变量才是"全员统一生效"。搞清楚它怎么联动，再选路径改，不会改错地方。

先搞懂它是怎么生效的：store、组件、配置器三处联动

• 全局只有一个开关值size，取值为default/large/small，存在 Pinia 的 app store 里并通过useStorage持久化到浏览器，定义在 src/stores/app.ts。
• 顶栏的尺寸下拉框 src/components/SizeSelect/ 只负责把选中的值写进 store（appStore.changeSize(size)），自己一行样式都不改。
• 真正的"放大缩小"发生在 src/App.vue：size被透传给 Element Plus 的<el-config-provider :size="size">，全站按钮、输入框、表格等组件的高度和字号随之切换，无需逐个组件设置。

路径一：顶栏尺寸下拉框，零代码切换三档尺寸

1. 登录后进入后台任意页面，看页面右上角工具栏，在语言切换图标旁边点"尺寸"图标（T字样的小方块）。
2. 下拉菜单出现「默认 / 大型 / 小型」三档，点「大型」。
3. 你会看到按钮、输入框整体变高，文字变大，同时顶部弹出"组件尺寸已修改"的提示，无需刷新。
4. 关闭浏览器重新打开，尺寸仍是「大型」——因为size被持久化了，下次启动自动沿用。

这一档切换影响的是 Element Plus 组件的size属性，适合先"试一把"再决定要不要写进代码。

路径二：改代码，定默认值与精细化控制

2.1 改项目默认尺寸

想让所有用户首次访问就是大号组件，把 src/settings.ts 中defaults对象的这一行：

size: ComponentSize.DEFAULT,

改成ComponentSize.LARGE即可。保存后重新pnpm dev，刷新页面你会发现：新用户（或清空过 localStorage 的人）打开系统，组件默认就是大号；老用户的浏览器里仍保留他自己上次选过的档位。

2.2 改一个变量调组件高度

三档尺寸对应的具体高度是 CSS 变量，写在 src/styles/element-plus-overrides.scss 的:root块里：

:root { --el-component-size: 34px; // 默认档组件高度 --el-component-size-small: 28px; // 小型档组件高度 --el-component-size-large: 38px; // 大型档组件高度 }

把--el-component-size从34px改成36px，全站按钮、输入框、表单项统一变高 2px，观感更舒展。

说明一点：本项目的src/styles/variables.scss只定义布局尺寸（侧边栏宽、导航高），没有$font-size-base这类全局字号 SCSS 变量；正文 14px 来自 Element Plus 默认值。所以"字号"层面的调整要么走三档切换，要么在 src/styles/element-plus-overrides.scss 中按组件覆盖font-size。

两条路径怎么选

• 临时体验 / 个人习惯：只用顶栏下拉框，零代码、即时生效、只影响你自己的浏览器。
• 团队项目：改defaults.size+--el-component-size*，一次提交，全员刷新后统一看到大号界面。
• 长期定制 / 只动局部：按组件在element-plus-overrides.scss覆盖font-size，不碰全局开关，避免"想放大表格结果菜单也变胖"。

写在最后

所谓"全局字体大小"，在这个项目里就是三档size开关 + 几个 CSS 变量的组合：界面改的是自己，代码改的是所有人。如果后续需要更细的粒度，可以给ComponentSize枚举加自定义档位，或在:root上引入一个--app-font-scale变量统一缩放正文字号，改动思路与本文完全一致。

【免费下载链接】vue3-element-admin🔥基于 Vue 3 + Vite 7+ TypeScript + element-plus 构建的后台管理前端模板（配套后端源码），vue-element-admin 的 vue3 版本。项目地址: https://gitcode.com/GitHub_Trending/vue3/vue3-element-admin