vue 大屏scale适配方案 留白和不留白

在Vue中实现大屏scale适配方案，通常可以通过CSS Media Queries结合Vue的响应式布局来实现。以下是两种常见的适配方式：

1. 留白方式（适配不同宽高比的屏幕）：

/* 全屏背景 */
.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
}
 
/* 保持容器宽高比 */
.keep-aspect-ratio {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
 
/* 通过scale实现内容的缩放 */
.scale-content {
  transform: scale(0.8); /* 假设我们需要缩小到80% */
  transform-origin: top left; /* 设置缩放的基点 */
}

2. 不留白方式（适配宽高等比例屏幕）：

/* 全屏背景 */
.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
}
 
/* 不保持容器宽高比，直接设置宽高 */
.no-aspect-ratio {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1920px; /* 设定一个固定宽度 */
  height: 1080px; /* 设定一个固定高度 */
  margin: auto;
}
 
/* 通过scale实现内容的缩放 */
.scale-content {
  transform: scale(0.8); /* 假设我们需要缩小到80% */
  transform-origin: top left; /* 设置缩放的基点 */
}

在Vue组件中，你可以根据屏幕大小动态切换这些类来实现不同的适配效果。

<template>
  <div :class="{'fullscreen-bg': true, 'keep-aspect-ratio': isKeepAspect, 'no-aspect-ratio': !isKeepAspect}">
    <div :class="{'scale-content': true}">
      <!-- 内容 -->
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isKeepAspect: true // 根据需求动态切换
    };
  },
  mounted() {
    // 监听屏幕大小变化，动态设置isKeepAspect
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 根据实际情况判断是保持比例还是不保持
      this.isKeepAspect = someCondition;
    }
  }
};
</script>

在上述代码中，someCondition是一个逻辑表达式，用来决定是保持宽高比（留白方式）还是不保持宽高比（不留白方式）。根据实际情况动态切换这个条件，你可以使用屏幕宽度和高度的比例，或者其他条件来判断。