vue中大屏适配方案和局部适配方案

使用Mixins混入的方式解决自适应适配功能
通用的 css3：scale 缩放方案，通过 ref 指向页面，屏幕改变时缩放内容。项目的基准尺寸是 1920px*1080px，所以支持同比例屏幕 100%填充，如果非同比例则会自动计算比例居中填充，不足的部分则留白。

实现代码 screenmixin.js

// * 默认缩放值
const scale = {
    
    
  width: '1',
  height: '1',
};

// * 设计稿尺寸（px）
// const baseWidth = document.body.clientWidth;
// const baseHeight = document.body.clientHeight;
const baseWidth = 1920;
const baseHeight = 1080;

// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

export default {
    
    
  data() {
    
    
    return {
    
    
      // * 定时函数
      drawTiming: null,
    };
  },
  mounted() {
    
    
    setTimeout(() => {
    
    
      this.calcRate();
    }, 200);
    window.addEventListener('resize', this.resize);
  },
  created() {
    
    },
  beforeDestroy() {
    
    
    window.removeEventListener('resize', this.resize);
  },
  methods: {
    
    
    calcRate() {
    
    
      const appRef = this.$refs['appRef'];
      if (!appRef) return;
      // 当前宽高比
      const currentRate = parseFloat(
        (window.innerWidth / window.innerHeight).toFixed(5),
      );
      if (appRef) {
    
    
        if (currentRate > baseProportion) {
    
    
          // 表示更宽
          scale.width = (
            (window.innerHeight * baseProportion) /
            baseWidth
          ).toFixed(5);
          scale.height = (window.innerHeight / baseHeight).toFixed(5);
          appRef.style.transform = `scale(${
      
      scale.width}, ${
      
      scale.height}) translate(-50%, -50%)`;
        } else {
    
    
          // 表示更高
          scale.height = (
            window.innerWidth /
            baseProportion /
            baseHeight
          ).toFixed(5);
          scale.width = (window.innerWidth / baseWidth).toFixed(5);
          appRef.style.transform = `scale(${
      
      scale.width}, ${
      
      scale.height}) translate(-50%, -50%)`;
        }
      }
    },
    resize() {
    
    
      clearTimeout(this.drawTiming);
      this.drawTiming = setTimeout(() => {
    
    
        this.calcRate();
      }, 200);
    },
  },
};

页面使用

<template>
  <div ref="appRef" class="wrapper">
    <div class="home-canvas">
   		内容
    </div>
  </div>
</template>

<script>
import screenMinxi from '@/utils/screenmixin';
export default {
    
    
  mixins: [screenMinxi],
};
</script>

<style lang="scss" scoped>
// 必需写宽高,如有单位转换在style中写
.wrapper{
    
    
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top; /* 缩放基点为左上角 */
  overflow: hidden;
}
</style>

2.局部适配方案 mixins.js

export const scaleMixin = {
    
    
  methods: {
    
    
    // 计算缩放比例
    getScaleRatio() {
    
    
      const baseWidth = 1920; // 基准宽度
      const baseHeight = 1080; // 基准高度
      const screenWidth = window.innerWidth; // 屏幕宽度
      const screenHeight = window.innerHeight; // 屏幕高度
      const ratioX = screenWidth / baseWidth;
      const ratioY = screenHeight / baseHeight;
      return Math.min(ratioX, ratioY); // 取最小比例作为缩放比例
    },
  },
  mounted() {
    
    
    // 监听窗口变化，重新计算缩放比例
    window.addEventListener('resize', () => {
    
    
      const scaleRatio = this.getScaleRatio();
      this.$refs.wrapper.style.transform = `scale(${
      
      scaleRatio})`;
    });
    // 初始化缩放比例
    const scaleRatio = this.getScaleRatio();
    this.$refs.wrapper.style.transform = `scale(${
      
      scaleRatio})`;
  },
};

引入使用
import { scaleMixin } from './mixins';
mixins: [scaleMixin],

 <div class="canvas-wrapper wrapper" style="width:1600px;heibht:890px;" ref="wrapper" >
      <div class="">内容</div>
 </div>

样式style

.wrapper {
    
    
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform-origin: left top; /* 缩放基点为左上角 */
  transform: scale(1); /* 初始化缩放比例 */
}