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-adminvue3-element-admin 默认正文是 14px、组件高度 34px小屏上看久了总有人抱怨字有点小。调整全局字体大小其实只有两条路顶栏的尺寸下拉框是个人即时生效改一行默认值或几个 CSS 变量才是全员统一生效。搞清楚它怎么联动再选路径改不会改错地方。先搞懂它是怎么生效的store、组件、配置器三处联动全局只有一个开关值size取值为default/large/small存在 Pinia 的 app store 里并通过useStorage持久化到浏览器定义在 src/stores/app.ts。顶栏的尺寸下拉框 src/components/SizeSelect/ 只负责把选中的值写进 storeappStore.changeSize(size)自己一行样式都不改。真正的放大缩小发生在 src/App.vuesize被透传给 Element Plus 的el-config-provider :sizesize全站按钮、输入框、表格等组件的高度和字号随之切换无需逐个组件设置。路径一顶栏尺寸下拉框零代码切换三档尺寸登录后进入后台任意页面看页面右上角工具栏在语言切换图标旁边点尺寸图标T字样的小方块。下拉菜单出现「默认 / 大型 / 小型」三档点「大型」。你会看到按钮、输入框整体变高文字变大同时顶部弹出组件尺寸已修改的提示无需刷新。关闭浏览器重新打开尺寸仍是「大型」——因为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.sizesrc/settings.ts所有人的初始默认档团队交付前定基线--el-component-size*变量组件高度字号随组件档联动精细化控制排版密度具体组件样式里的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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/21 4:05:50 · 阅读 1.2k vue3-element-admin 全局字体大小完整指南：3 分钟调好字号与组件尺寸
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-adminvue3-element-admin 默认正文是 14px、组件高度 34px小屏上看久了总有人抱怨字有点小。调整全局字体大小其实只有两条路顶栏的尺寸下拉框是个人即时生效改一行默认值或几个 CSS 变量才是全员统一生效。搞清楚它怎么联动再选路径改不会改错地方。先搞懂它是怎么生效的store、组件、配置器三处联动全局只有一个开关值size取值为default/large/small存在 Pinia 的 app store 里并通过useStorage持久化到浏览器定义在 src/stores/app.ts。顶栏的尺寸下拉框 src/components/SizeSelect/ 只负责把选中的值写进 storeappStore.changeSize(size)自己一行样式都不改。真正的放大缩小发生在 src/App.vuesize被透传给 Element Plus 的el-config-provider :sizesize全站按钮、输入框、表格等组件的高度和字号随之切换无需逐个组件设置。路径一顶栏尺寸下拉框零代码切换三档尺寸登录后进入后台任意页面看页面右上角工具栏在语言切换图标旁边点尺寸图标T字样的小方块。下拉菜单出现「默认 / 大型 / 小型」三档点「大型」。你会看到按钮、输入框整体变高文字变大同时顶部弹出组件尺寸已修改的提示无需刷新。关闭浏览器重新打开尺寸仍是「大型」——因为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.sizesrc/settings.ts所有人的初始默认档团队交付前定基线--el-component-size*变量组件高度字号随组件档联动精细化控制排版密度具体组件样式里的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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考