组件等比例放大——scale和zoom

scale和zoom的区别

1. zoom的缩放是相对于左上角的；而scale默认是居中缩放，可以通过transform-origin修改基准点
2. zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化。
3. 对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸
4. 兼容性问题。firefox下不支持zoom；scale针对IE9+

由于zoom兼容性问题，我们采用scale进行缩放。

需求描述

有个组件S，需要在A页面显示本来的大小（用于截图发邮件），在B页面放大1.25倍（用于详情查看，需要放大一点）

在B页面还有锚点的交互，和滚动定位，可以定位到组件S的某个区域上。大概这样

transform: scale(1.25);
transform-origin: top;
或者
zoom: 1.25;

scale问题和解决

问题： scale放大，占据宽高不变，导致内容高度不够，锚点定位到最后，菜单上移消失问题
解决: 在组件S加载完之后，获取放大后的高，在html中设置该高度

   handleDomLoaded() {
      const sketchDom = document.getElementById('sketch')
      const { width, height } = sketchDom.getBoundingClientRect()
      this.heightStyle = { height: height + 'px'}
 }

如果不考虑兼容firfox，可以改用zoom，就没有上面的问题了