大屏自适应方案

大屏自适应方案

参考：http://xmduanru.com/#/dataScreen

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

const dataScreenRef = ref<HTMLElement | null>(null);
function handelScreenAuto() {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
}

function resize() {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
}

function getScale() {
  const width = 1920;
  const height = 1080;
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
}
onMounted(() => {
  handelScreenAuto();
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});
</script>
<template>
  <div class="screen-wrapper">
    <div class="screen-main" id="screen" ref="dataScreenRef">
      <home-head></home-head>
      <home-main></home-main>
      <home-footer></home-footer>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.screen-wrapper {
  height: 100%;
  width: 100%;
  background-color: #fff;
  position: relative;
  background: url("../assets/image/bg.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100% 100%;
  background-size: cover;

  .screen-main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: all 0.1s;
    transform-origin: 0 0;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    overflow: hidden;
  }
}

background-attachment 属性用于控制背景图像的滚动行为。它有三个值：

1. scroll：背景图像随内容滚动（默认值）。
2. fixed：背景图像固定在视口，内容滚动时背景不动。
3. local：背景图像随内容的滚动而滚动，但只在元素的内部滚动区域。