设计师以1920*1080 比例给出设计稿， 需要高还原度实现效果可以使用等比例缩放页面方案，具体代码如下

  html,body {background: #010a3d;padding: 0;margin: 0;width: 100%;height: 100%;--scale: 1;}.homepage {width: 1920px;height: 1080px;background: rgb(101, 154, 252);background-size: 100% 100%;position: absolute;transform: scale(var(--scale)) translate(-50%, -50%);transform-origin: 0 0;left: 50%;top: 50%;transition: 0.3s;}

<!--自动缩放容器 1920*1080 -->
<div id="homepage" v-cloak class="ScaleBox" ref="ScaleBox" :style="{width: width + 'px',height: height + 'px'}">

<script>'use strict';var homepage = new Vue({el: '#homepage',data() {return {scale: 0,width: 1920,height: 1080,}},mounted() {//以1920*1080设计稿 为标准尺寸进行自动缩放this.setScale();window.addEventListener("resize", this.debounce(this.setScale));},methods: {getScale() {// 固定好16：9的宽高比，计算出最合适的缩放比const {width, height} = this;const wh = window.innerHeight / height;const ww = window.innerWidth / width;console.log(ww < wh ? ww : wh);return ww < wh ? ww : wh;},setScale() {// 获取到缩放比例，设置它this.scale = this.getScale();if (this.$refs.ScaleBox) {this.$refs.ScaleBox.style.setProperty("--scale", this.scale);}},debounce(fn, delay) {const delays = delay || 500;let timer;return function () {const th = this;const args = arguments;if (timer) {clearTimeout(timer);}timer = setTimeout(function () {timer = null;fn.apply(th, args);}, delays);};},},created() {}})
</script>