VUE页面屏幕自适应等比例缩放

在Vue中实现屏幕自适应等比缩放，可以通过计算样式或CSS媒体查询来实现。以下是一个简单的例子，使用CSS样式实现等比缩放：

<template>
  <div id="app">
    <div class="container">
      <!-- 内容 -->
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  mounted() {
    this.resizeHandler();
    window.addEventListener('resize', this.resizeHandler);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler);
  },
  methods: {
    resizeHandler() {
      const baseWidth = 1920; // 设计稿宽度
      const baseFontSize = 16; // 基准字号
      const browserWidth = document.documentElement.clientWidth || document.body.clientWidth;
      const scale = browserWidth / baseWidth;
      document.documentElement.style.fontSize = `${baseFontSize * scale}px`;
    }
  }
};
</script>
 
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
 
.container {
  width: 1920px; // 设计稿宽度
  height: 1080px; // 设计稿高度
  // 其他样式
}
 
// 其他样式规则
</style>

在这个例子中，我们在mounted钩子中添加了resizeHandler方法，并在窗口大小改变时注册和注销该方法。resizeHandler方法计算了当前浏览器窗口的宽度与设计稿宽度的比例，并设置了根元素的字体大小，实现等比缩放。

注意，这种方法并不适用于所有场景，特别是涉及到响应式布局的时候。对于更复杂的自适应解决方案，可能需要使用更多的CSS3媒体查询和其他技术。