背景：我做的是一个现场活动的游戏页面，对前端适配要求比较高。我选择js框架是vue,ui框架是element-ui。当初我就想做个最小宽度1200然后再结合媒体查询一起使用。然而发现写的代码太多了感觉css控制特别麻烦。而且现场活动的电脑屏幕尺寸还特别的千奇百怪没办法只能重新想方法。
我第一次尝试的写法是：首先一屏显示，获取当前页面的窗口的高度，显示区的部分全用设计稿的百分比控制。感觉写了太多的css还达不到想要的结果
突然想到 tansform:scale缩放，适配有很多方法这只是我认为适合我们自己的业务。首先我不用写很多的适配css进行控制。gud
显示区固定尺寸的设计稿 动态获取当前视图区的页面高度和宽度。此时显示区域的缩放比例用 获取到的高度 / 设计稿固定的高度。然后再把总的页面区域用这个缩放比例缩放（缩小或者放大）。此时的宽度用 获取到的宽度 / 缩放比例。动态赋值给最外层显示区。
简单的代码如下：
mounted() {
this.autoSetScale() // 进页面先执行一次页面高度和宽度计算然后赋值
window.addEventListener('resize', () => {
this.autoSetScale()
}, false)
},
methods: {
// 自动缩放屏幕比例
autoSetScale() {
let zoom = (window.innerHeight / 800).toFixed(3)
this.transformScale = `scale(${zoom})`
this.width = `${(window.innerWidth / zoom).toFixed(2)}px`
}
}
这是vue页面上赋值的部分
这只是其中的一个简单的页面效果图
自由调节的小屏
全屏：
这是我实现的简单的业务，有其他方法欢迎留言指教。谢谢