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

最新推荐文章于 2024-07-31 23:41:38 发布

liyoro

最新推荐文章于 2024-07-31 23:41:38 发布

阅读量4.2k

点赞数 1

分类专栏： web前端文章标签： visual studio code vue.js 前端 javascript

本文链接：https://blog.csdn.net/liyoro/article/details/106108088

版权

web前端专栏收录该内容

33 篇文章 2 订阅

订阅专栏

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

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

大屏等比缩放，我这里在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的比例计算，如果设计图是按照别的尺寸做的，例如 1920x1080、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>

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