vue 大屏1928*1080页面适应方案之一

这里UI的设计稿是1928*1080,适应性方案有几种flex布局 @media媒体查询 但是在这里我是用到了

transform: scale(var(--wscale), var(--hscale)) 

进行一个整体的使用  如果不想拉扯，建议还是需要保持比例16:9。

首先得到一个可视宽高最合适的16:9比例

      getwScale (width) {
        let ww = width / 1920
        return ww
      },
      gethScale (height) {
        let wh = height / 1080
        return wh
      },
      setScale () {
        // 获取窗口的宽度和高度
        var windowWidth = window.innerWidth
        var windowHeight = window.innerHeight

        // 计算最接近16:9宽高比的尺寸
        var targetWidth = Math.round(windowHeight * (16 / 9))
        var targetHeight = Math.round(windowWidth * (9 / 16))

        if (targetWidth > windowWidth) {
          // 如果以高度为基准计算出来的宽度大于窗口宽度，则使用窗口高度和16:9宽高比计算高度
          targetWidth = windowWidth
        } else {
          // 如果以宽度为基准计算出来的高度大于窗口高度，则使用窗口宽度和16:9宽高比计算宽度
          targetHeight = windowHeight
        }
        // 输出最接近16:9宽高比的尺寸
        this.wscale = this.getwScale(targetWidth)
        this.hscale = this.gethScale(targetHeight)
        this.$refs.screenScale.style.setProperty('--wscale', this.wscale) // 设置指定键值对系统属性
        this.$refs.screenScale.style.setProperty('--hscale', this.hscale) // 设置指定键值对系统属性
        this.$refs.screenScale.style.setProperty('--heightValue',
          (this.hscale * 1080 + 'px')
        )
        this.$refs.screenScale.style.setProperty('--widthValue',
          (this.wscale * 1920 + 'px')
        )
      },

在mounted生命周期中调用即可

 mounted () {
      this.setScale()
}

布局html

设置css

#screenView {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #01192d;
}

 .screenScale {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1920px;
      height: 1080px;
      transform: scale(var(--wscale), var(--hscale)) translate(-50%, -50%);
      transform-origin: 0 0;
      transform-style: preserve-3d;
      margin: auto;
    }