--scale变量配合calc()控制尺寸比transform: scale()更可靠，因它改变布局盒而非仅渲染层，避免点击区域错位、坐标系失准、字体糊化等问题。
直接用 --scale 变量配合 calc() 控制所有尺寸，比 transform: scale() 更可靠——它改的是布局盒本身，不是渲染层，点击区域、z-index、文字清晰度全都不翻车。
为什么不能只靠 transform: scale()
它只是把像素块拉伸/压缩，DOM 尺寸没变：getBoundingClientRect() 返回的宽高仍是原始值，导致鼠标 hover 区域错位、position: absolute 偏移失效、canvas/svg 内部坐标系失准。更隐蔽的问题是：缩放后字体抗锯齿劣化，尤其在 1.2x–1.4x 区间，小字号直接糊成一片。
- 必须加
transform-origin: left top，否则默认居中缩放会把内容切出视口 -
scale(0.8)后，一个width: 200px的容器实际占位还是 200px，但显示只有 160px，兄弟元素照样按 200px 排列 - 第三方图表库（如 ECharts）内部依赖 DOM 尺寸做 canvas resize，
transform不触发其重绘逻辑
--scale 变量怎么绑定所有尺寸单位
核心是让每个带物理意义的 CSS 属性都参与 calc() 计算链，而不是只改 font-size 或 padding。
-
font-size: calc(14px * var(--scale))—— 文字大小随比例变化 -
border-width: calc(1px * var(--scale))—— 边框粗细同步缩放，否则高分辨率下细得看不见 -
line-height: calc(1.4 * var(--scale))—— 必须写成带单位的乘法，避免嵌套时变成1.4em * 1.2 * 1.2这种指数放大 -
letter-spacing: calc(0.5px * var(--scale))和stroke-width: calc(2px * var(--scale))（SVG 中）也常被漏掉
注意：vw/vh 是视口单位，和 --scale 正交；若设计稿以 1920px 宽为基准，100vw 应换算为 calc(100vw / 1920 * var(--scale)) 才真正对齐。
缩放比例动态计算的关键逻辑
别用 window.innerWidth / 1920 简单除，真实场景中要保设计稿宽高比（1920×1080 → 16:9），防止窄屏下内容被横向压扁或纵向拉长。
- 先算当前视口宽高比：
const currentRatio = window.innerWidth / window.innerHeight - 对比设计稿比值
1920 / 1080 ≈ 1.77778，若currentRatio > 1.77778（屏幕更宽），说明高度是瓶颈 → 按高度缩放：scale = window.innerHeight / 1080 - 否则按宽度缩放：
scale = window.innerWidth / 1920 - 最终设为：
document.documentElement.style.setProperty('--scale', scale.toFixed(4))
记得加防抖（300ms），但别用 Lodash —— 大屏页面对首屏性能敏感，手写一个 setTimeout + clearTimeout 足够。
容易被忽略的兼容性与边界问题
--scale 值不是越大越好，0.8–1.5 是实测安全区间。低于 0.8 字体可读性断崖下跌；高于 1.5 后 SVG 图标描边过粗、ECharts 折线点渲染模糊、阴影 box-shadow 出现明显锯齿。
- 不要在子组件里覆盖
--scale，除非你明确需要局部反向缩放（比如弹窗固定 400px 宽），否则父子嵌套会叠加缩放，var(--scale)在子元素里再乘一次，结果不可控 -
transform: scale()和--scale混用时，务必确认 canvas 的width/height属性已按新比例重设，否则 canvas 内容拉伸变形 - 某些老版本 Chrome 对
calc(14px * var(--scale))解析不稳定，建议加 fallback：font-size: 14px; font-size: calc(14px * var(--scale))
真正麻烦的从来不是计算缩放值，而是检查哪一行 CSS 没进 calc() 链——border、outline、shadow、stroke，甚至 animation 的 keyframes 里用到的偏移量，都得手动补上 * var(--scale)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
