一种简单的大屏适配方法

大屏项目通常只需要全屏显示，本文的方法是一种简便的实现方式，具体实现思路就是获取屏幕的尺寸，使用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})`
	})
}