TIP

大屏开发本来就只有针对特定分辨率屏幕才能最大程度还原设计图。查询相关资料后，选中scale方式适配大屏最为合适。

方法思路

设计图为1920*1080，直接使用设计图尺寸开发，不用去计算尺寸。

使用vue3框架，写一个组件包裹住我们的项目，组件代码如下：

<template>
  <div class="screen-adapter" :style="style">
    <slot></slot>
  </div>
</template>
<script lang="ts">
  import { defineComponent, toRefs, onMounted, onUnmounted, ref, computed } from 'vue';
  export default defineComponent({
    name: 'ScreenAdapter',
    props: {
      width: {
        type: String,
        default: '1920',
      },
      height: {
        type: String,
        default: '1080',
      },
    },
    setup(props) {
      const { width, height } = toRefs(props);
      const scaleRatio = ref(1);
      const style = computed(() => {
        return {
          width: width.value + 'px',
          height: height.value + 'px',
          transform: `scale(${scaleRatio.value}) translate(-50%, -50%)`,
        };
      });
      const Debounce = (fn: Function, delay?: number) => {
        delay = delay || 200;
        let timer: null | number;
        return (...rest: any) => {
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
            timer = null;
            fn.call(this, ...rest);
          }, delay);
        };
      };
      // 获取放大缩小比例 以小的为准
      const getScaleRatio = () => {
        const w = window.innerWidth / +width.value;
        const h = window.innerHeight / +height.value;
        scaleRatio.value = w < h ? w : h;
      };
      onMounted(() => {
        getScaleRatio();
        window.onresize = Debounce(getScaleRatio);
      });
      onUnmounted(() => {
        window.onresize = null;
      });
      return {
        style,
      };
    },
  });
</script>
<style lang="scss" scoped>
  .screen-adapter {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: 0.3s;
    transform-origin: 0 0; // 变化中心改为左上角 默认是center
  }
</style>

使用

<screen-adapter>
  <section class="container">
    <!-- 自定义内容 --> 
  </section>
</screen-adapter>

问题

• 在开发测试时屏幕分辨率比例不符时会出现留白

在 App.vue给#app中加一个全屏背景（设计图本来就有背景），让留白不那么明显

• 缩放后某些属性会导致文字模糊

  改为zoom缩放可解决部分情况，但是zoom缩放会导致echart事件无效。

  一下列举些使用scale缩放后会使文字模糊的情况

  • 背景颜色

    使用纯色背景时会导致模糊，但是颜色加点透明度可恢复

  • 当元素内部元素使用定位超出父元素时也会导致模糊