src/App.vue

<template>
	<div id="app" ref="app">
		<transition name="fade" mode="out-in">
			<router-view></router-view>
		</transition>
	</div>
</template>
<script>
import _ from "lodash";
export default {
	name: "app",
	mounted() {
	},
	created() {
		this.$nextTick(() => {
			const $app = this.$refs.app;
			// 设置 屏幕 百分比 尺寸 适配
			const standardScale = "100%" / "100%";
			var minHeight = 1080;
			window.addEventListener(
				"resize",
				_.debounce(function () {
					const docHeight = document.body.clientHeight;
					const docWidth = document.body.clientWidth;
			 
					if (docWidth < 1700) {
						const currentScale = docHeight / docWidth;
						let [scale, translate] = [0, 0];
						if (currentScale < standardScale) {
							// 以高度计算
							scale = docHeight / 1080;
							const shouleWidth = 1920 * scale;
							const offsetWidth = docWidth - shouleWidth;
							translate =
								offsetWidth > 0 ? `translate(${offsetWidth / 2}px, 0)` : "";
						} else {
							// 以宽度计算
							scale = docWidth / 1920;
							const shouleHeight = 1080 * scale;
							const offsetHeight = docHeight - shouleHeight;
							translate =
								offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : "";
						}
				
						if (docHeight <= 600) {
							$app.style.cssText = `
							transform: scale(${scale}) ${translate};
							transform-origin: top left;
							min-width: 1920px;
							min-height:500px;
          				`;
						}
						if (docHeight <= 700) {
							$app.style.cssText = `
							transform: scale(${scale}) ${translate};
							transform-origin: top left;
							min-width: 1920px;
							min-height:900px;
          				`;
						}
						else if (docHeight <= 750) {
							$app.style.cssText = `
							transform: scale(${scale}) ${translate};
							transform-origin: top left;
							min-width: 1920px;
							min-height:920px;
          				`;
						}
						else {
							$app.style.cssText = `
							transform: scale(${scale}) ${translate};
							transform-origin: top left;
							min-width: 1920px;
							min-height:1080px;
          				`;
						}
					} else {
						$app.style.cssText = '';
					}
				}),
				300
			);
			if (document.createEvent) {
				var event = document.createEvent("HTMLEvents");
				event.initEvent("resize", true, true);
				window.dispatchEvent(event);
			} else if (document.createEventObject) {
				window.fireEvent("onresize");
			}
		});
	}
}
</script>
<style lang="scss">
body {
	margin: 0px;
	padding: 0px;
	font-family: Microsoft YaHei, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, SimSun, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}
#app {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 100%;
}
a {
	color: #56a9ff;
}
.fade-enter-active,
.fade-leave-active {
	transition: all .2s ease;
}
.fade-enter,
.fade-leave-active {
	opacity: 0;
}
#nprogress .bar {
	height: 3px !important;
	background: #56a9ff !important; //自定义颜色
}
</style>