大屏自适应方案

大屏自适应方案

参考：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：背景图像随内容的滚动而滚动，但只在元素的内部滚动区域。