直接用--scale变量统一控制字体比例更可控易维护，因vw基于视口宽度导致flex子项内文字撑破容器、高dpr下模糊、无视系统缩放；--scale需用calc()联动font-size、line-height、padding等所有尺寸属性，并通过媒体查询动态更新。
直接用 --scale 变量统一控制字体比例，比写一堆媒体查询更可控、更易维护，也避免了 vw 在 flex 容器里错估宽度的问题。
为什么不用 vw 直接设 font-size？
因为 vw 基于整个视口宽度，而实际文字所在的容器（比如 flex 子项、卡片、侧边栏）往往远窄于视口。例如三列布局下，每列宽约 320px，但 4vw 在 1920px 屏幕上会算出 76.8px，标题直接撑破卡片。更糟的是，滚动或缩放时 vh 还会跳变。vw 适合 banner 标题这类强绑定视口的场景，不适合常规内容流。
- flex 容器内子元素用
vw→ 换行异常、字号失真 - 高 DPR 设备（如 Retina）下，
vw不感知设备像素比，文字可能模糊 - 系统级字体缩放（macOS “更大字体”、iOS “显示与文字大小”）对
vw无影响，导致双重缩放冲突
怎么用 --scale 变量真正联动所有字体尺寸？
核心是把所有带尺寸含义的 CSS 属性都纳入 calc() 计算链，不能只改 font-size 就完事。否则 padding 看起来太小、border 看起来太细、line-height 显得挤，整体比例就崩了。
- 根级定义：
:root { --scale: 1; } - 字体类属性统一乘：
font-size: calc(14px * var(--scale)); line-height: calc(1.4 * var(--scale)); letter-spacing: calc(0.02em * var(--scale)); - 间距类属性同样处理：
padding: calc(8px * var(--scale)) calc(12px * var(--scale)); margin: calc(4px * var(--scale)); - 边框和阴影别漏：
border-width: calc(1px * var(--scale)); box-shadow: 0 calc(2px * var(--scale)) calc(4px * var(--scale)) rgba(0,0,0,0.1);
注意：line-height 必须写成 calc(1.4 * var(--scale))，而不是 1.4em —— 后者在嵌套缩放时会指数放大。
如何响应不同屏幕动态更新 --scale？
推荐用媒体查询覆盖变量值，而不是重写整套样式。这样逻辑集中，且 calc 表达式自动生效。关键是要选对断点，并限制缩放区间。
- 小屏（≤768px）：
@media (max-width: 768px) { :root { --scale: 0.85; } }（避免文字过小，iOS 强制放大前留余地） - 中屏（769px–1440px）：
@media (min-width: 769px) and (max-width: 1440px) { :root { --scale: 1; } } - 大屏（≥1441px）：
@media (min-width: 1441px) { :root { --scale: 1.25; } }（上限建议 ≤1.5，再大可读性明显下降）
如果要用 JS 动态计算（比如适配 1920px 设计稿），记得加防抖，且只在 resize 后更新 document.documentElement.style.setProperty('--scale', value)，别频繁触发重排。
容易被忽略的兼容与细节
--scale 方案看似简单，但落地时最常翻车的不是计算逻辑，而是“没参与计算”的属性和渲染副作用。
- 第三方组件库（如 Ant Design、Element Plus）的字体通常基于
@font-size-base变量，必须在构建时或运行时同步覆盖该变量，否则组件内文字不缩放 - SVG 中的
font-size、stroke-width、letter-spacing都要显式用calc()绑定--scale - Canvas 文字需 JS 手动按
--scale缩放ctx.font和ctx.fillText坐标，CSS 变量进不到 canvas API - 务必加
text-size-adjust: 100%，防止 iOS Safari 对小于 16px 的文字做额外放大，破坏你设定的比例
真正难的不是写对那几行 calc()，而是确认每一个像素级尺寸——从按钮边框到图表刻度线——都参与了同一套缩放逻辑。漏掉一个，整个比例感就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
