vue pc端自适应

1.HTML部分

<template>
	<div id="app" >
		<div class="app-view" :style="{'--scale':scale}">
			<div>
				<router-view />
			</div>
		</div>
	</div>
</template>

2.JS部分

<script>
	export default {
		name: "App",
		data() {
			return {
				scale: window.innerWidth / 1920
			}
		},
		mounted() {
			window.addEventListener('resize', this.resize)
		},
		methods: {
			resize() {
				this.scale = window.innerWidth / 1920;
			}
		}
	};
</script>

3.CSS部分

<style scoped>
	#app {
		width: 1920px;
	}
	.app-view{
		transform: scale(var(--scale));
		transform-origin: left top;
	}
</style>