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