大屏项目通常只需要全屏显示,本文的方法是一种简便的实现方式,具体实现思路就是获取屏幕的尺寸,使用transform属性保持页面的适配,这样不管页面的缩放比例是什么样,页面的比例始终保持一致,这样我们在写代码的时候就直接根据设计稿尺寸使用px进行开发即可。

vue3代码如下:

export function useResize() {
	// 获取屏幕尺寸
	const { width, height } = screen

	// 
	const appRef = document.getElementById('app')
	appRef.style.width = `${width}px`
	appRef.style.height = `${height}px`

	const currentWidth = document.body.clientWidth
	appRef.style.transform = `scale(${currentWidth / width})`

	window.addEventListener('resize', () => {
		appRef.style.transform = `scale(${document.body.clientWidth / width})`
	})
}