[Vue]大屏界面自适应-transform: scale() translate(x, y)

最新推荐文章于 2024-05-24 16:01:01 发布

天意pt

最新推荐文章于 2024-05-24 16:01:01 发布

阅读量1.2k

点赞数

分类专栏： CSS Javascript vue 文章标签：前端 javascript 大屏端

本文链接：https://blog.csdn.net/henrypt/article/details/127682154

版权

CSS 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

Javascript

24 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

效果

示例代码

<div class="level">
<div class="title">专业化公司</div>
<div class="content row">左边的内容区域</div>

</div>

<div class="container container-right">
<div class="level">
<div class="title">财务部</div>
<div class="content column">右边的内容区域</div>

</div>

</div>
</div>
</template>

export default {
name: 'test',

data() {
return {
screen_config: {
scale: 0.99, // 默认缩放值
width: 1920, // 设计尺寸 4096
height: 1080 // // 设计尺寸 2160
}
}
},
mounted() {
const _self = this
_self.resetScreen()
_self.setScale()
window.addEventListener("resize", this.debounce(this.setScale))
},
methods: {

// 重置默认设计尺寸(初始尺寸)
resetScreen(){
const _self = this
const { width, height, scale } = _self.screen_config
_self.screen_config.width = width*scale
_self.screen_config.height = height*scale
console.log('resetScreen width = ', _self.screen_config.width, _self.screen_config.height)
},
// 获取大屏适配scale值
getScale() {
const _self = this
// 固定好16：9的宽高比，计算出最合适的缩放比
const { width, height, scale } = _self.screen_config
let ww = window.innerWidth / width
let wh = window.innerHeight / height

_self.screen_config.width = window.innerWidth*scale
_self.screen_config.height = window.innerHeight*scale

if(wh<=1){
wh = Math.ceil(wh)
ww = Math.ceil(ww)
}
else{
wh = Math.floor(wh)
ww = Math.floor(ww)
}
// console.log('getScale ww = ', ww, ', wh = ',wh, `[${window.innerHeight / height}]`)
return ww < wh ? ww : wh; // 宽 < 高 => 以高为准; 反之以宽为准
},

// 设置大屏适配scale值
setScale() {
const _self = this
// 获取到缩放比例，设置它
_self.scale = this.getScale();
if (_self.$refs.ScaleBox) {
_self.$refs.ScaleBox.style.setProperty("--scale", this.scale);
setTimeout(()=>{ if (_self.$refs.ScaleBox) { _self.$refs.ScaleBox.style.visibility = 'visible' } },0.1*1000)
}
},
debounce(fn, delay) {
const delays = delay || 500
let timer
return function () {
const th = this
const args = arguments
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(function () {
timer = null
fn.apply(th, args)
}, delays)
}
},