vue2实现浏览器大小变动页面缩放功能

本文介绍: 在页面 html 部分获取元素对象（这个一般设置在页面 div的第二层）。4.页面具体内容的宽高最好设置。这样按比例的属性会导致在不同分辨率下的排版出现问题（比如1920跟1366）。需要实现根据浏览器大小变化从而页面内容同样缩放思想实现：1.使用 css中的。监听方法，监听尺寸变化从而调用缩放相关方法。这样的具体属性，如果设置。获取操作应该也是一样的。

需要实现根据浏览器大小变化从而页面内容同样缩放思想实现：1.使用 css中的scale缩放方法。2.通过window.addEventListener添加resize监听方法，监听尺寸变化从而调用缩放相关方法。3.通过 vue2的 ref 在页面html 部分获取元素对象（这个一般设置在页面div的第二层）。4.页面具体内容的宽高最好设置rem、px、em这样的具体属性，如果设置%、vw/vh 这样按比例的属性会导致在不同分辨率下的排版出现问题（比如1920跟1366）。
html 部分主要内容:

&lt;div class="page-wrap"&gt;
    &lt;div ref="screen-wrap" class="page"&gt;
     &lt;div class="title"&gt;&lt;/div>
     <div class="content-box">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
	</div>
    </div>
</div>

CSS部分主要内容:

.page-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #030a1d;
  background-image: linear-gradient(to bottom, #001C42, #001D43);
}
.page {
  background: url('../../assets/imgs/bg.png') no-repeat;
  left: 50%;
  top: 50%;
  transform-origin: left top;
  transform: translate(-50%, -50%);
  background-size: 100% 100%;
  width: 1920px;
  height: 1080px;
  position: absolute;
  display: flex;
  flex-direction: column;
}
//上面主要部分
.content-box {
    display: flex;
    .left {
      box-sizing: border-box;
      width: 0;
      flex: 0 0 378px;
      margin: 29.16px 19.2px 0 19.2px;
      overflow: hidden;
    }
    .center {
      width: 0;
      flex: 1;
    }
  }

JS主要部分代码：

throttle(fn, delay) {
      var timer = null
      return function() {
          var context = this, args = arguments
          clearTimeout(timer)
          timer = setTimeout(function() {
            fn.apply(context, args)
          }, delay)
      }
    },
    /**
     * @description 监控浏览器尺寸变化
     */
     setScale() {
      const app = this.$refs['screen-wrap']
      const baseWidth = 1920
      const baseHeight = 1080
      const baseRate = parseFloat((baseWidth / baseHeight).toFixed(5))
      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
      if (currentRate > baseRate) {
        // 实际屏幕比基准更宽
        const rate = (window.innerHeight / baseHeight).toFixed(5)
        app.style.transform = `scale(${rate}, ${rate}) translate(-50%, -50%)`
      } else {
        // 实际屏幕比基准更高
        const rate = (window.innerWidth / baseWidth).toFixed(5)
        app.style.transform = `scale(${rate}, ${rate}) translate(-50%, -50%)`
      }
    },
/**
在mounted生命周期方法中触发监听缩放方法
*/
mounted() {
    window.addEventListener('resize', this.throttle(() => {
      this.setScale()
    }, 300));
    this.setScale();
}