transform缩放不改变文档流尺寸是设计使然；它仅修改渲染坐标，绕过布局计算，故offsetwidth等属性不变，且事件坐标与视觉位置脱钩。
transform 缩放不改变文档流尺寸，是设计使然，不是 bug
浏览器把 transform 定义为纯视觉层操作，它只修改渲染管线中的绘制坐标，完全绕过布局（layout）计算阶段。这意味着：offsetWidth、getBoundingClientRect()、margin/padding 占位、父容器高度塌陷与否——全都不受影响。你看到的“变小了”，只是画布上那一块像素被压缩了，DOM 里的盒子还是原来那么大。
为什么 getComputedStyle(el).transform 返回的 matrix 算不出真实缩放比？
矩阵里 a/d 值可能带符号或受 rotate/translate 叠加干扰，直接取值会出错。必须：
- 先用
getComputedStyle(el).transform拿到 matrix 或 matrix3d 字符串 - 解析出 a、b、c、d 四个值（2D）或 a、b、c、d、e、f（3D）
- 真实 X 缩放 =
Math.sqrt(a * a + b * b)，Y 缩放 =Math.sqrt(c * c + d * d) - 忽略 translate 分量（e/f），它们只影响位置，不参与缩放计算
硬除或直接取 a/d 会翻车，尤其当元素同时有 rotate(90deg) 时，a 可能为 0，d 为 0，但实际缩放仍是 1。
想让缩放真正影响布局，只能换方案，不能硬刚 transform
常见误操作是给缩放元素加 width: 50% 或 margin: -25px 手动“补偿”，结果在响应式下崩盘。更靠谱的路径是：
- 用
zoom：能缩盒模型，但非标准、Chrome 强制最小字号 ≥12px、Safari 不支持 - 用
font-size+em单位控制内容流：适合文本主导的容器，缩放后字体清晰，但对图片/图标无效 - 包裹一层容器，显式设
width/height，再内部transform: scale()居中，靠外层撑空间 - JS 动态读取缩放比，重设
style.width/style.height，但会触发重排，慎用于动画中
缩放后点击区域错位，本质是事件坐标没缩放
鼠标点击时，clientX/clientY 基于原始 layout box 计算，和视觉位置脱钩。比如一个 width: 200px 的按钮加了 transform: scale(0.5)，视觉宽 100px，但点击 (150, 50) 仍落在原始 200px 区域内——而那里已超出可视范围。修复方式只有两种：
- 不用
scale，改用width/height+font-size控制，让事件区域与视觉一致 - 保留
scale，但 JS 中手动换算坐标：拿到缩放比和transform-origin偏移，把 clientX/Y 反向映射回缩放前坐标再判断
别指望 pointer-events: none 或 overflow: hidden 能绕过这个问题，它们不改 hit-testing 的底层逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
