字体放大方案说明

问题背景

希望整体放大字号以提升可读性（托育场景），但出现以下问题：

el-form 的 label-width 过小导致标签换行
<el-table type="index" label="序号" width="70"> 等固定列宽换行

根因分析

原项目同时使用了两套缩放机制，互相打架：

机制	效果
`postcss-pxtorem` + `rem.js`	所有 px 转 rem，按屏宽等比缩放
`$--font-size-*` Sass 变量 +1px	额外只放大字体

字体被双重放大（rem 缩放 + Sass 增量），但列宽/label-width 只被 rem 缩放一次，相对宽度不够 → 换行。

font-size: 15px → 0.9375rem → 0.9375 × 19(baseSize) = 17.8px 实际渲染
width: 80     → 5rem       → 5 × 19              = 95px   实际渲染

比例: 95 / 17.8 = 5.33 ← 太小，Element-UI 设计比例是 5.71

最终方案：纯 rem 统一等比缩放（淘宝 flexible 经典方案）

核心原则：字体和宽度统一转 rem，由 rem.js 的 baseSize 一个参数控制全局缩放比例。

涉及文件

文件	作用
`src/utils/rem.js`	动态设置 html font-size，`baseSize` 控制缩放基准
`vue.config.js`	`postcss-pxtorem` 配置，所有 px → rem
`src/assets/styles/element-variables.scss`	不覆盖字体变量，使用 Element-UI 默认值

配置要点

// vue.config.js — postcss-pxtorem
require("postcss-pxtorem")({
  rootValue: 16,       // 1rem = 16px(设计稿基准)，勿动
  propList: ["*"],     // 所有属性统一转 rem（含 font-size）
})

// src/utils/rem.js
const baseSize = 20    // 唯一调大小的入口，调大 = 全局等比放大

scss

// src/assets/styles/element-variables.scss
// 不设置 $--font-size-* 变量，使用 Element-UI 默认值

缩放公式

实际渲染值 = 源码 px ÷ 16(rootValue) × html.fontSize(baseSize × 屏宽比例)

屏宽	html fontSize	font-size: 14px 实际	width: 80 实际	比例
1920px	20px	17.5px	100px	5.71 ✅
1600px	16.7px	14.6px	83.3px	5.71 ✅
1366px	14.2px	12.5px	71.2px	5.71 ✅

字体和宽度的比例始终等于 Element-UI 设计值 5.71，永不换行。

如何调大小

只需改 rem.js 第一行：

// 嫌字小 → 调大
const baseSize = 21

// 嫌字大 → 调小
const baseSize = 18

改完重启 dev server 即可生效。

rem.js 最小值分析

let fontSize = (baseSize * Math.min(scale, 2)) > 14
  ? (baseSize * Math.min(scale, 2))
  : 14

屏宽	min=12	min=14 ✅	min=16
1920px	20 (17.5px)	20 (17.5px)	20 (17.5px)
1366px	14.2 (12.5px)	14.2 (12.5px)	16 (14px)
1280px	13.3 (11.7px)	14 (12.3px)	16 (14px)
1024px	12 (10.5px) ❌	14 (12.3px)	16 (14px)

结论：14 最合适 — 保证了最小可读性，又让缩放覆盖最广的屏幕范围。

其他方案对比

只改 `$--font-size-base`

scss

$--font-size-base: 15px;

优点	缺点
简单直接，字体大一档	字体固定 px，不随屏宽缩放
不会导致换行（宽度也不缩放）	小屏上字显大，大屏上字可能显小
	不是"统一缩放"理念

排除 font-size，Sass 独立控制

propList: ["*", "!font-size"]  // 字号不走 rem

优点	缺点
字体精确可控	字体和宽度在不同屏幕比例不一致
只放大字体不动布局	非主流方案，缺乏社区参考

总结

	推荐	理由
方案	纯 rem 统一缩放	国内最主流，淘宝 flexible 经典方案
配置入口	`rem.js` baseSize	只改一个数字，字体/宽度/间距等比生效
字体变量	不覆盖 Element-UI 默认	避免双重放大
最小值	14	可读性和缩放范围的最佳平衡

字体放大方案说明 ​

问题背景 ​

根因分析 ​

最终方案：纯 rem 统一等比缩放（淘宝 flexible 经典方案） ​

涉及文件 ​

配置要点 ​

缩放公式 ​

如何调大小 ​

rem.js 最小值分析 ​

其他方案对比 ​

只改 $--font-size-base ​

排除 font-size，Sass 独立控制 ​

总结 ​