微信小程序 圖片寬高自適應
1.以前將小程序圖片寬度設置爲屏幕寬度:
imageLoad: function () {
this.setData({
imageWidth: wx.getSystemInfoSync().windowWidth
})
}
2.現在:
.imgClass{
width: 100vw;
}
解析:
CSS3引入的”vw”和”vh”基於寬度/高度相對於窗口大小
”vw”=”view width”“vh”=”view height”
以上我們稱爲視窗單位允許我們更接近瀏覽器窗口來定義大小。
參照demo案例對照下面四個容器的css樣式:
.demo {
width: 100vw;
font-size: 10vw; /* 寬度爲窗口100%, 字體大小爲窗口的10% */
}
.demo1 {
width: 80vw;
font-size: 8vw; /* 寬度爲窗口80%, 字體大小爲窗口的8% */
}
.demo2 {
width: 50vw;
font-size: 5vw; /* 寬度爲窗口50%, 字體大小爲窗口的5% */
}
.demo3 {
width: 10vw;
height: 50vh; /* 寬度爲窗口10%, 容器高度爲窗口的50% */
}