elementui字号

Element UI 默认字号设置

Element UI 的默认字号基于 CSS 变量和预设样式，主要依赖以下规则：

• 基础字号为 14px，适用于大部分组件（如表格、表单、按钮等）。
• 标题类组件（如 el-title）会通过层级递增字号（例如 16px、18px 等）。

修改全局字号

通过覆盖 CSS 变量或修改主题配置文件调整字号：
方法 1：覆盖 CSS 变量
在项目的全局样式文件中（如 App.vue 或 main.css）添加：

:root {
  --el-font-size-base: 16px; /* 修改基础字号 */
}

方法 2：主题生成工具
使用官方主题工具 Element Theme Generator 生成自定义主题，修改 font-size 相关变量后编译替换默认样式。

组件级字号调整

单独修改组件的样式，例如调整按钮字号：

.el-button {
  font-size: 12px;
}

响应式字号适配

结合 rem 或媒体查询实现响应式调整：

@media (max-width: 768px) {
  :root {
    --el-font-size-base: 12px;
  }
}

注意事项

• 修改全局字号可能影响布局，需同步检查组件间距和容器尺寸。
• 若使用按需引入，确保样式覆盖的优先级高于组件库默认样式。