前端：浏览器ctrl++/--方法/缩小界面，某一个盒子大小不受影响，或者是其他缩放逻辑

1.使用场景：

在我们使用笔记本电脑时，由于电脑屏幕比较小，在使用某些系统界面时，可能需要设置一下

或者是设置浏览器：

总之。无论哪种方法，都是为了界面显示的更大，方便我们观看。

但是对于一些系统，虽然通过系统的设置缩放，但是还是界面显示比较小，然后当我们在浏览器上进行缩放时，才能满足要求，但是一下区域就会因为变大，而顶出屏幕显示区域。

2.效果展示

意思就是：当我们通过缩放时，只是把房间展示区域放大了，但是检索查询房间并没有放大，这样就不会发生顶出屏幕显示区域。

3.代码及思路

1.为dom盒子添加ref属性

2.声明方法（简化）

const widthScale = ref('');
const heightScale = ref('');
const currentWidth = ref('');
const currentHeight = ref('');
const sizeload = () => {
  console.log('resize加载');
  let width = 1823;
  let height = 996;
  currentWidth.value = document.body.clientWidth;
  currentHeight.value = document.body.clientHeight;
  console.log(currentWidth.value);
  widthScale.value = currentWidth.value / width;
  heightScale.value = currentHeight.value / height; //6.35
  console.log(widthScale.value);
  console.log(heightScale.value);
  console.log(hoverContainer.value);
  console.log(hoverContainer.value.style);
  if (hoverContainer.value.style) {
    hoverContainer.value.style.transform = `scale(${widthScale.value},${heightScale.value})`;
  }
  // dom && (dom.style.transform = `scale(${widthScale},${heightScale})`);
};

3.添加事件监听

window.addEventListener('load', sizeload);
window.addEventListener('resize', sizeload);

4.原理总结：

当我们把浏览器缩放时，document.body.clientWidth的可视大小就会变大或者变小，但是我们给浏览器也就是系统前端页面设置一个默认值，然后算出他们的比，当浏览器放大时，我们把这个比值赋值给单独一个盒子，那效果不就是除了他大小不变，其余都放大吗！

2.知识扩展

浏览器按住Ctrl+-缩放改变的是什么？Ctrl缩放改变的是视口大小，即改变的是viewport视口。

改变一个dom元素的大小：transform：zoom  /  scale

异同：

1.兼容性：zoom不是css的标准属性，Firefox和Opera Mini 不支持，其他标准的浏览器倒是都可以很好的支持。ie从ie6以后就开始支持这个属性。这个属性用起来有风险，比如要考虑Firefox的兼容性问题。tranform:scale(x) 则是css的标准属性，除Opera Mini外，得到了几乎所有标准浏览器的支持。ie浏览器是在ie11后开始支持，不过ie9和ie9以后的浏览器都支持带前缀的属性-ms-transform。

2.取值：zoom的取值可以normal，可以是大于等于0的浮点数，也可以是大于等于0的百分比。其中normal就是元素实际的尺寸，不缩也不放。当zoom的值为0时，zoom也是不缩也不放，跟zoom为1的情况一样；  transform:scale(x)的取值只能是数字，不能是百分比或者其他，但是取值可以是正数也可以是负数和0。其中x为0的时候，元素直接缩到消失不见了。x为负数的时候，元素会顺时针旋转180度，也可能是逆时针。而且scale是可以使用scaleX()、scaleY()、scaleZ()单独放大x、y、z不同轴。zoom只能等比放大。

3.显示效果：zoom是以左上角有原点进行缩放的，并且默认这个点还不能改变。transfrom:scale(x)的变化默认是以中心点为准变化的，而且这个变化的点是可以通过transform-origin进行改变。

zoom缩放后的元素是占据实际位置的。比如zoom的元素后紧跟一个名字叫other的div。元素被放大后名字叫other的div也被挤下去了。而scale缩放的元素是不占据实际位置的，被scale放大的元素，看起来很大，但是实际占据的位置还是之前那么小。所以其他元素并不会因此而改变位置。

4.性能：zoom是实际改变物体大小的，而且这种改变会影响到其他元素，所以使用zoom的时候会引起浏览器重新渲染，性能较低。而scale是单独只改变目标元素，并不会影响到其他的元素，所以性能会好一些。