vue 大屏适配的一种实现思路

大屏适配的一种实现思路

以设计稿为 1920*1080px为例, 开发时按设计稿开发

根据屏幕大小缩放页面, 已达到适配的目的, 必须是等比较缩放,否则会出现空白

<template>
  <div class="dashboard-container">
    <div id="dashboardBox" :style="{ transform: transformStyle }">
      <!-- 顶部标题栏 -->
      <header class="page-header"></header>

      <!-- 左侧模块 -->
      <aside class="left-panel">
      </aside>

      <!-- 中间底部模块 -->
      <section class="center-bottom-panel">
      </section>

      <!-- 右侧模块 -->
      <aside class="right-panel">
      </aside>
    </div>

  
  </div>
</template>

<script>

export default {
  computed: {
    transformStyle() {
        //设计稿1920*1080
      const baseHeight = 1080
      const scaleValue = this.windowHeight / baseHeight
      return `scale(${scaleValue}, ${scaleValue}) translate(-50%, -50%)`
    },
  },
  data() {
    return {
      windowHeight: window.innerHeight,
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.windowHeight = window.innerHeight
    },
  },
}
</script>

<style lang="scss" scoped>
/* 全局样式 */
.dashboard-container {
  width: 100vw;
  height: 100vh;
  background-color: #050d19;
  background-image: radial-gradient(circle at 50% 0%, #1a3a5a 0%, #050d19 70%);
  color: #fff;
  font-family: 'Microsoft YaHei', sans-serif;
  overflow: auto;
  position: relative;
}

#dashboardBox {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}
</style>