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

最新推荐文章于 2025-07-21 16:50:38 发布

小猿L

最新推荐文章于 2025-07-21 16:50:38 发布

阅读量437

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/enhenglhm/article/details/130316412

文章介绍了如何使用JavaScript和CSS实现一个基于16:9比例的UI适配方案。通过计算窗口宽高并应用`transform:scale`来调整内容大小，确保在不同设备上保持比例不变。在`mounted`生命周期钩子中调用函数`setScale`以达到最佳显示效果。

这里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

 <div id="screenView">
    <div ref="screenScale" class="screenScale"></div>
</div>

设置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;
    }