大屏适配方案

<template>
  <div ref="appRef" class="app-viewport" id="appRef">
   
  </div>
</template>

<script>
let loading = null;
// import drawMixin from '../libs/drawMixin';
import headBar from './components/headBar.vue';
import { mapGetters } from 'vuex';
import autofit from 'autofit.js'

export default {
  name: 'Layout',
  components: {
    headBar,
  },
  // mixins: [drawMixin],
  data() {
    return {
      isIndex: true,
      screenRatioByDesign: 1920 / 1080,
      currentPath: '/home',
      menuIndex: 0,
    };
  },
  computed: {
    ...mapGetters(['moduleTypeControl']),
  },
  watch: {
    currentPath: {
      handler() {
        this.changeMenu();
      },
    },
  },
  beforeCreate() {
    loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)',
    });
  },
  mounted() {
    // this.setHtmlFontSize();
    // window.addEventListener('resize', this.setHtmlFontSize.bind(this));
    autofit.init({
    dh: 1080,
    dw: 1920,
    el: "#appRef",
    resize: true,
  });
  },
  created() {
    loading.close();
  },
  methods: {
    setHtmlFontSize() {
      const html = document.getElementsByTagName('html')[0];
      const width = document.body.clientWidth;
      const height = document.body.clientHeight;
      const screenRatio = width / height;
      var fontSize =
        ((screenRatio > this.screenRatioByDesign
          ? this.screenRatioByDesign / screenRatio
          : 1) *
          width) /
        10;

      /* const scale = height / 1080
      var fontSize = (192 * Math.min(scale, 1)) */
      html.style.setProperty('font-size', `${fontSize}px`);
    },

  },
};
</script>

<style lang="scss" scoped>
.app-viewport {
  //width: 1920px;
  //height: 100%;
  //position: absolute;
  //top: 50%;
  //left: 50%;
  //transform: translate(-50%, -50%);
  //transform-origin: left top;
  //overflow: hidden;
  //background: #010816;
  //transition: all 0.3s linear;
  //=======用于px转rem 用 pxtorem 插件 配合 setHtmlFontSize 方法

//position: absolute;

  //margin: auto;
  //top: 0;
  //bottom: 0;
  //left: 0;
  //right: 0;
  //width: 100%;
  //height: 100%;
  //background: url(../assets/imgs/big_background.png) no-repeat center center;
  //background-size: 100% 100%;
  //transition: all 0.3s linear;
  //============20240117  用 drawMixin 样式引用

  //width: 1920px;
  //height: 1080px;
  //position: absolute;
  //top: 50%;
  //left: 50%;
  //transform: translate(-50%, -50%);
  //transform-origin: left top;
  //overflow: hidden;
  //background: url(../assets/imgs/big_background.png) no-repeat center center;
  //background-size: 100% 100%;
  //transition: all 0.3s linear;
  //=========== 用 插件 autofit 一行搞定 

background: url(../assets/imgs/big_background.png) no-repeat center center; background-size: 100% 100%; transition: all 0.3s linear; .main-box { width: 100%; height: 100%; color: #fff; padding: 17px 24px; } .menu-box { position: absolute; bottom: 16px; left: 50%; display: flex; width: 1156px; height: 88px; margin-left: -578px; background: url(../assets/imgs/bottom_frame.png) no-repeat center center; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; .menu-box-sub { width: 134px; height: 60px; background: url('../assets/imgs/button_no.png') no-repeat center center; background-size: 100% 100%; margin: 0 5px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-family: PingFang SC; font-weight: 400; color: #9bb9e0; line-height: 23px; text-shadow: 0px 0px 8px #06293e; cursor: pointer; &.active { color: #ffffff; line-height: 25px; background: linear-gradient(180deg, #ffffff 0%, #4bd8ff 100%); -webkit-background-clip: text; background: url('../assets/imgs/button_had.png') no-repeat center center; background-size: 100% 100%; } } } } </style>

// 屏幕适配 mixin 函数

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

// * 设计稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080

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

export default {
  data() {
    return {
      // * 定时函数
      drawTiming: null
    }
  },
  mounted () {
    this.calcRate()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    calcRate () {
      let _this = this
      const appRef = this.$refs["appRef"]
      //console.log(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%)`
        }
      }
      // _this.$store.dispatch('app/set_scale', scale.width)
    },
    resize () {
      clearTimeout(this.drawTiming)
      this.drawTiming = setTimeout(() => {
        this.calcRate()
      }, 200)
    }
  },
}

 

postcss: {
        plugins: [
          pxtorem({
            rootValue: 192,
            propList: ['*']
          })
        ]
      },