vue项目大屏开发屏幕自适应为显示屏分辨率封装

1.目录结构

 2.resizeScreen.js文件中

// 居中铺满
export function centerFull({ width: pageWidth, height: pageHeight }) {
  const screenWidth = window.innerWidth; // 获取窗口实际宽度
  const screenHeight = window.innerHeight; // 获取窗口实际高度
  document.body.style.width = `${pageWidth}px`; // 设置body宽带
  document.body.style.height = `${pageHeight}px`; // 设置body高度

  const ratioX = screenWidth / pageWidth; // 宽度比例
  const ratioY = screenHeight / pageHeight; // 高度比例

  document.body.style.transform = `scale(${ratioX}, ${ratioY})`; // 将页面缩放成屏幕大小， scale（x,y）定义 2D 缩放转换。
  window.globalScale && window.globalScale.setScale(ratioX, ratioY); // 当window存在globalScale属性，则执行window.globalScale.setScale(ratioX, ratioY)
}

// 等比例铺满
export function equalRatioFull({ width: pageWidth, height: pageHeight }) {
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight;
  document.body.style.width = `${pageWidth}px`;
  document.body.style.height = `${pageHeight}px`;
  const ratioX = screenWidth / pageWidth;
  const ratioY = screenHeight / pageHeight;
  const scale = Math.min(ratioX, ratioY); //获得缩放比例比值最小的比例
  let offsetX = 0;
  let offsetY = 0;
  if (ratioX < ratioY) {
    offsetY = (screenHeight / ratioX - pageHeight) / 2;
  } else {
    offsetX = (screenWidth / ratioY - pageWidth) / 2;
  }
  document.body.style.transform = `scale(${scale}) translate(${offsetX}px, ${offsetY}px)`;
}

// 无样式
export function none() {
  // document.body.style.width = `${pageWidth}px`;
  // document.body.style.height = `${pageHeight}px`;
}

3.FitScreen.vue组件中

<script>
import { equalRatioFull, centerFull, none } from '@/utils/resizeScreen';

const displayMap = {
  centerFull,
  equalRatioFull,
  none,
};

export default {
  props: {
    displayType: {
      validator: function (value) {
        return Object.keys(displayMap).indexOf(value) !== -1;
      },
      default: 'centerFull',
    },
    pageSize: {
      type: Object,
      default: () => ({
        width: 1920,
        height: 1080,
      }),
    },
  },
  mounted() {
    const fitScreen = this.fitScreen.bind(this); // 将当前组件内容绑定到fitScreen方法中并付给fitScreen
    fitScreen(); // 调用fitScreen方法
    window.addEventListener('resize', fitScreen); // 监听window当发生resize事件时调用fitScreen方法
    this.$once('hook:beforeDestroy', function () {
      window.removeEventListener('resize', fitScreen); // 在组件摧毁前注销监听事件
    });
  },
  methods: {
    fitScreen() {
      displayMap[this.displayType](this.pageSize); // 调用指定覆盖函数
    },
  },
  render() {
    return null;
  },
};
</script>
<style lang="scss">
html, body {
  overflow: hidden;
}
body {
  transform-origin: top left; // 变形起点为左上方
}
</style>

4.App.vue 根组件中

<template>
  <div id="app">
    <fit-screen />
    <app-title />
    <router-view />
  </div>
</template>

<script>
import AppTitle from "./components/AppTitle";
import FitScreen from "./components/FitScreen";
import("./scss/common.scss");
export default {
  name: "App",
  components: { AppTitle, FitScreen },
  data() {
    return {
      pageSize: {
        width: 1920,
        height: 1080,
      },
    };
  },
  comments: {
    AppTitle,
    FitScreen,
  },
};
</script>

<style lang="scss">
#app {
}
</style>