【Vue】vue2 vue3 实现 scale 缩放大屏自适应

最新推荐文章于 2025-05-23 16:50:26 发布

努力挣钱的小鑫

最新推荐文章于 2025-05-23 16:50:26 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.youkuaiyun.com/IAIPython/article/details/130571250

Vue.js 专栏收录该内容

56 篇文章

订阅专栏

该代码示例展示了如何在Vue3中实现基于屏幕尺寸的自适应布局。通过onMounted钩子和窗口重置事件监听器，应用动态调整比例以适应不同屏幕。设计稿尺寸为1920x1080，使用缩放和translate平移确保内容在不同设备上正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3 例子 App.vue

template

<div class="screen-wrapper">
    <div class="screen" id="screen">
      <router-view />
    </div>
  </div>

script

import { onMounted } from "vue";

onMounted(() => {
  // 初始化自适应-在刚显示的时候就开始适配一次
    handleScreenAuto();
  // 绑定自适应函数-防止浏览器栏变化后不再适配(这里可做节流优化)
    window.onresize = () => handleScreenAuto();
});

// 数据大屏自适应函数
const handleScreenAuto = () => {
  const designDraftWidth = 1920; // 设计稿的宽度
  const designDraftHeight = 1080; // 设计稿的高度

  // 根据屏幕的变化适配的比例
  const scale =
    document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight
      ? document.documentElement.clientWidth / designDraftWidth
      : document.documentElement.clientHeight / designDraftHeight;

  // 缩放比例
  (document.querySelector("#screen") as any).style.transform = `scale(${scale}) translate(-50%)`;
};

style

.screen-wrapper {
  height: 100%;
  width: 100%;
  .screen {
    display: inline-block;
    width: 1920px; //设计稿的宽度
    height: 1080px; //设计稿的高度
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
  }
}