大屏

1. 自适应

<template>
 <section class="base trans-common">页面内容域</section>
</template>
<script>
mounted() {
    this.$nextTick(() => {
      function setScale() {
        let designWidth = 1920; //设计稿的宽度，根据实际项目调整
        let designHeight = 1080; //设计稿的高度，根据实际项目调整
        // 缩放比
        const wh = window.innerHeight / designHeight;
        const ww = window.innerWidth / designWidth;
        let scale = ww < wh ? ww : wh;

        // 获取所有类名为  trans-common 的元素，设置 transform 属性
        let selectorAll = document.querySelectorAll(".trans-common");
        for (let i = 0; i < selectorAll.length; i++) {
          selectorAll[i].style =
            "transform: translate(-50%, -50%) scale(" + scale + "); ";
        }
      }
      setScale();
    });
  },
</script>
<style>
.base {
  width: 1920px;
  height: 1080px;
  position: absolute;
  left: 50%;
  top: 50%;
</style>