前端大屏展示框架搭建（三）

2024年5月7日 145次阅读 来源: liyoro

大屏全屏页面等比例缩放的实现

等比缩放页面，是大屏开发里比较常用的方式了。一般设计图按大屏的尺寸设计，按尺寸开发，最后等比缩放。

大屏等比缩放，我这里在layout.vue里面做控制。

layout.vue

主要是在 app-wrapper 所在div进行scale。

<template>
  <div>
    <div
      class="app-wrapper"
      :style="{
        transformOrigin: 'center top',
        transform: `scale(${scalseNum},${scalseNum})`,
        '-webkit-transform': `scale(${scalseNum},${scalseNum})`,
        '-moz-transform': `scale(${scalseNum},${scalseNum})`,
        '-o-transform': `scale(${scalseNum},${scalseNum})`,
        '-ms-transform': `scale(${scalseNum},${scalseNum})`,
      }"
    >
      <!-- 头部栏 -->
      <app-head></app-head>
      <!-- 内容栏 -->
      <app-main />
    </div>
  </div>
</template>

scale的比例按照实际屏幕宽与1366的比例计算，如果设计图是按照别的尺寸做的，例如 1920×1080、3840*2160（4K）屏等等，在下面代码的 resize_window 方法设置对应宽度就行。

代码如下：

<script>
import { AppMain, AppHead } from './components'

export default {
  name: 'Layout',
  components: {
    AppMain,
    AppHead,
  },
  data() {
    return {
      scalseNum: 1, //缩放比例
    }
  },
  computed: {},
  mounted() {
    //计算缩放比例
    this.resize_window()
    // 监听浏览器缩放，实时改变大屏宽高
    window.addEventListener('resize', () => {
      this.resize_window()
    })
  },
  methods: {
    //计算缩放比例
    resize_window() {
      let w_width = Number(document.documentElement.clientWidth / 1366)
      this.scalseNum = w_width
    },
  },
}
</script>

以上，遇到1366×768比例的大屏，基本可以自动缩放，适合做大屏幕的展示。

工程代码

整个项目的代码在下面地址，参考commit就懂过程了

大屏开发框架工程代码

    原文作者：liyoro
    原文地址: https://blog.csdn.net/liyoro/article/details/106108088
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞