vue通过mixins混入实现所有大屏适配

市场上屏幕种类繁多，自己开发MAC的版本显示器1440×900与另一个显示屏的全屏状态下是1920×1080，如何让自己的web项目，在不同的宽高比下依旧体现出高优越的观感体验。。。。

rem响应式单位:好用但是设计稿不会立马出rem，需要蓝湖或者自己计算，同时的确定根单位font-zise的在不同的屏幕尺寸下的基准值。
%单位，不精细，对于字体，线粗等，精修类样式体感过累
那我只想根据设计稿走，假如设计稿就是（1920×1080），我只需要全程px精修样式，不需要考虑太多的适配问题呢？？？？？？
有没有一种我只需要考虑一种屏幕比的情况下，项目去自动适配其他的屏幕呢。

有了，你的项目将整体居中，看情况或者去修改我的mixin模式。

不走样不失真

// 屏幕适配 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 () {
      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%)`
        }
      }
    },
    resize () {
      clearTimeout(this.drawTiming)
      this.drawTiming = setTimeout(() => {
        this.calcRate()
      }, 200)
    }
  },
}

原理在代码中已有体现，使用方法如下：插入混入js。混入js可作为你的utils目录下的强力干将，配置于整个项目。

<template>
  <div id="databack" ref="appRef">
      <dv-loading>Loading...</dv-loading>
  </div>
</template>
mport drawMixin from "../utils/drawMixin";
export default {
  name:'dataBack',
  mixins: [ drawMixin ],
  components:{},
  data:()=>({}),
  mounted() {}
}
</script>
<style lang="scss" scoped>
  #databack{
    color: #d3d6dd;
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
    overflow: hidden;
    background: url('../assets/pageBg.png');
  }
</style>