vue固定比例垂直水平居中

导言：最近在做一个课程教学项目翻新（因为原本会写egert的同事被炒了，但明明egert项目里还有几十个课程都没做完），迫不得已，我只能用其他方式去模仿egert项目的布局，并且记录下这次遇到的情况。

没做完的egert项目一打开就是一种固定比例的自适应，当当前页面比例小于1920*1080时，网页内容的左右会接触浏览器的左右边，垂直居中；当页面比例大于1920*1080时，网页内容的上下会接触浏览器的上下边，水平居中。

于是我参考了其他人的解决方法（vue项目等比例缩放页面），在此之上略为修改：

1.首先还是创建一个drawMixin.js

// 屏幕适配 mixin 函数
// 动态固定比例缩放页面，无论如何都是1920:1080的比例，并时刻水平垂直居中
 
// * 默认缩放值
const scale = {
	width: '1',
	height: '1',
}
 
// * 设计稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080
// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
 
export default {
	data() {
		return {
			// * 定时函数
			drawTiming: null,
		}
	},
	mounted() {
		//加载后先计算一遍缩放比例
		this.calcRate()
		//生成一个监听器：窗口发生变化从新计算计算一遍缩放比例
		window.addEventListener('resize', this.resize)
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.resize)
	},
	methods: {
		calcRate() {
			//拿到整个页面元素
			const appRef = this.$refs['zoom']
			//如果没有值就结束
			if (!appRef) return
			// 当前宽高比
			const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
			//判断：如果有值代表页面变化了
			if (appRef) {
				//判断当前宽高比例是否大于默认比例
				if (currentRate > baseProportion) {
					//宽高比大于1920:1080时，上下边接触浏览器边界
					appRef.style.top = 0;
					scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
					scale.height = (window.innerHeight / baseHeight).toFixed(5)
					// console.log(window.innerWidth,window.innerHeight,currentRate, baseProportion)
					//整个页面的元素样式，缩放宽高用当前同比例放大的宽高
					appRef.style.transform = `matrix(${scale.width},0,0, ${scale.height},0,0)`
				} else {
					//宽高比小于1920:1080时，左右边接触浏览器边界
					appRef.style.left = 0;
					scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5)
					scale.width = (window.innerWidth / baseWidth).toFixed(5)
					appRef.style.transform = `matrix(${scale.width},0,0, ${scale.height},0,0)`
				}
			}
		},
		resize() {
			//先清除计时器
			clearTimeout(this.drawTiming)
			//开启计时器
			this.drawTiming = setTimeout(() => {
				this.calcRate()
			}, 200)
		},
	},
}

 2.外层app.vue引用drawMixin.js，并设置css

<template>
	<div id="app">
		<div class="container" ref="zoom">
			<router-view />
		</div>
	</div>
</template>
<script>
	import drawMixin from '@/util/drawMixin.js'
	export default {
		name: 'App',
		mixins: [drawMixin],
		data() {
			return {}
		},
		mounted() {},
		methods: {},
	}
</script>
<style>
	* {
		padding: 0;
		margin: 0;
	}
	
	#app {
		width: 1920px;
		height: 1080px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transform-origin: left top;
		overflow: hidden;
		background-color: #888888;
	}
	
	.container {
		width: 1920px;
		height: 1080px;
		background-color: #fff; /* 背景颜色 */
		position: absolute;
	}
</style>

---

如此引用，即可让内容块固定比例自适应缩放，适应各种大小的电脑或浏览器。

下图是实际效果：

宽高比大于1920:1080时，上下边接触浏览器边界

宽高比小于1920:1080时，左右边接触浏览器边界