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

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

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

layout.vue

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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的比例计算，如果设计图是按照别的尺寸做的，例如 1920x1080、3840*2160（4K）屏等等，在下面代码的 resize_window 方法设置对应宽度就行。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>

工程代码

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

大屏开发框架工程代码