vue2 mixin的方式大屏适配（缩放居中的方式）

最新推荐文章于 2025-07-19 16:11:01 发布

原创

最新推荐文章于 2025-07-19 16:11:01 发布 · 832 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #前端 #javascript #vue.js #html

文章介绍了如何使用bigScreenAdapterMixin在Vue项目中实现自适应屏幕大小的container组件。该组件根据设计稿尺寸调整，保证在不同设备上保持1.77778的比例。用户可以直接引入snows-utils库来简化开发过程。

使用要求：指定容器的 id 为 bigScreenContainer

一、效果图

不管你的屏幕多大都会根据设计稿 1920*1080 进行缩放

图一：缩小的效果

图二：放大的效果

二、使用方式

<template>
  <div id="bigScreenContainer" ref="bigScreenContainer">
    // 内容
  </div>
</template>



<script>
// import { bigScreenAdapterMixin } from "snows-utils";
import bigScreenAdapterMixin from "@/utils/bigAdapterMixin";
export default {
  name:'',
  mixins: [bigScreenDdapterMixin],
</script>