vue.js 获取当前屏幕的宽度_vue 获取当前屏幕的宽度，图片等比例缩放，动态设置css样式...

vue 获取当前屏幕的宽度，图片等比例缩放

这个是一个背景图，点击对应的圆圈就会出现一个蒙层上面显示详情，但是只要当前窗口大小变化了，因为我的蒙层大小是固定的px，所以不会变，就不在图片对应的位置了

我们要绑定样式style，等后面要根据当前的屏幕来给蒙层动态设置宽高

:to="{name:'/streetDetails',query:{code:'310151101'}}"

:style="style01"

class="street-item item1"

>详情

>

css主要代码

.main {

background: transparent url("../../src/assets/img/street.png") no-repeat;

padding-top: 50.78%;

position: relative;

background-size: 100%;

& .content {

border: 0px;

}

}

.street-item {

height: 92px;

width: 92px;

position: absolute;

max-width: 92px;

min-width: 70px;

min-height: 92px;

min-height: 70px;

text-align: center;

display: block;

line-height: 92px;

// background: #c1bcbc82;

border-radius: 50%;

// border: 1px solid red;

& span {

color: white;

display: none;

}

}

a:hover {

& span {

display: inline-block;

}

background: #4b42426b;

}

.item1 {

position: absolute;

top: 11.3%;

left: 18.1%;

}

主要js代码*

data() {

return {

style01: {

width: 92,

height: 92,

lineheight: 92,

borderRadius: 50

},

centerWidth: "",

centerHeight: ""

};

},

mounted() {

//立即执行

window.onresize = () => {

return (() => {

this.resizeWin();

})();

};

this.resizeWin();

},

methods: {

resizeWin() {

console.log(document.documentElement.clientWidth);

//当前window 宽

this.centerWidth = document.documentElement.scrollWidth;

//最小宽度 1440

var boxH = 92,

boxW = 92;

if (this.centerWidth > 1440) {

boxH = boxW = Math.ceil((this.centerWidth / 1920) * 92);

// console.log("H", boxH);

} else {

boxH = boxW = Math.ceil((1440 / 1920) * 92);

}

// var item = document.getElementsByClassName("street-item");

console.log(this.style01.width);

this.style01.width = boxW + "px";

this.style01.height = boxH + "px";

this.style01.lineHeight = boxH + "px";

this.style01.borderRadius = boxW / 2 + "px";

}

}