vue页面等比例缩放

作者：你给的一半温柔发布日期:2025-08-07 浏览:97

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 页面等比例缩放</title>
  <style>
    html, body, #app {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .scale-container {
      width: 100%;
      height: 100%;
      position: relative;
      transform-origin: top left;
    }
    .content {
      width: 1920px; /* 假设设计稿宽度为1920px */
      height: 1080px; /* 假设设计稿高度为1080px */
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="scale-container" :style="{ transform: 'scale(' + scale + ')' }">
      <div class="content">
        <!-- 这里放置你的页面内容 -->
        <h1>这是一个等比例缩放的 Vue 页面</h1>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          scale: 1,
        };
      },
      mounted() {
        this.updateScale();
        window.addEventListener('resize', this.updateScale);
      },
      methods: {
        updateScale() {
          const designWidth = 1920; // 设计稿宽度
          const designHeight = 1080; // 设计稿高度
          const windowWidth = window.innerWidth;
          const windowHeight = window.innerHeight;
          const scaleX = windowWidth / designWidth;
          const scaleY = windowHeight / designHeight;
          this.scale = Math.min(scaleX, scaleY);
        }
      },
      beforeDestroy() {
        window.removeEventListener('resize', this.updateScale);
      }
    });
  </script>
</body>
</html>

解释说明

HTML 结构:
- #app 是 Vue 实例挂载的根元素。
- .scale-container 是一个容器，用于应用缩放变换。
- .content 是实际的内容区域，假设其宽度和高度分别为 1920px 和 1080px（根据设计稿）。
CSS 样式:
- html, body, #app 设置为 100% 宽高，并且去除默认的 margin 和 padding。
- .scale-container 使用 transform-origin: top left 来确保缩放是从左上角开始的。
- .content 固定宽高为设计稿的尺寸。
Vue 实现:
- 在 mounted 生命周期钩子中调用 updateScale 方法来计算初始缩放比例。
- updateScale 方法会根据当前窗口大小和设计稿尺寸计算出合适的缩放比例，并更新 this.scale。
- 监听 resize 事件以确保在窗口大小变化时重新计算缩放比例。
- 在组件销毁前移除 resize 事件监听器以避免内存泄漏。

上一篇：idea vue开发

下一篇：vue cors