vue2实现浏览器大小变动页面缩放功能
在页面html部分获取元素对象(这个一般设置在页面div的第二层)。4.页面具体内容的宽高最好设置。这样按比例的属性会导致在不同分辨率下的排版出现问题(比如1920跟1366)。需要实现根据浏览器大小变化从而页面内容同样缩放思想实现:1.使用css中的。监听方法,监听尺寸变化从而调用缩放相关方法。这样的具体属性,如果设置。获取操作应该也是一样的。
·
需要实现根据浏览器大小变化从而页面内容同样缩放思想实现:1.使用css中的scale
缩放方法。2.通过window.addEventListener
添加resize
监听方法,监听尺寸变化从而调用缩放相关方法。3.通过vue2的 ref
在页面html部分获取元素对象(这个一般设置在页面div的第二层)。4.页面具体内容的宽高最好设置rem、px、em
这样的具体属性,如果设置%、vw/vh
这样按比例的属性会导致在不同分辨率下的排版出现问题(比如1920跟1366)。
html部分主要内容:
<div class="page-wrap">
<div ref="screen-wrap" class="page">
<div class="title"></div>
<div class="content-box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
</div>
CSS部分主要内容:
.page-wrap {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #030a1d;
background-image: linear-gradient(to bottom, #001C42, #001D43);
}
.page {
background: url('../../assets/imgs/bg.png') no-repeat;
left: 50%;
top: 50%;
transform-origin: left top;
transform: translate(-50%, -50%);
background-size: 100% 100%;
width: 1920px;
height: 1080px;
position: absolute;
display: flex;
flex-direction: column;
}
//上面主要部分
.content-box {
display: flex;
.left {
box-sizing: border-box;
width: 0;
flex: 0 0 378px;
margin: 29.16px 19.2px 0 19.2px;
overflow: hidden;
}
.center {
width: 0;
flex: 1;
}
}
JS主要部分代码:
throttle(fn, delay) {
var timer = null
return function() {
var context = this, args = arguments
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(context, args)
}, delay)
}
},
/**
* @description 监控浏览器尺寸变化
*/
setScale() {
const app = this.$refs['screen-wrap']
const baseWidth = 1920
const baseHeight = 1080
const baseRate = parseFloat((baseWidth / baseHeight).toFixed(5))
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
if (currentRate > baseRate) {
// 实际屏幕比基准更宽
const rate = (window.innerHeight / baseHeight).toFixed(5)
app.style.transform = `scale(${rate}, ${rate}) translate(-50%, -50%)`
} else {
// 实际屏幕比基准更高
const rate = (window.innerWidth / baseWidth).toFixed(5)
app.style.transform = `scale(${rate}, ${rate}) translate(-50%, -50%)`
}
},
/**
在mounted生命周期方法中触发监听缩放方法
*/
mounted() {
window.addEventListener('resize', this.throttle(() => {
this.setScale()
}, 300));
this.setScale();
}
把ref
改成id
再通过document.getElementById
获取操作应该也是一样的
更多推荐
已为社区贡献16条内容
所有评论(0)