微信小程序图片宽高自适应详解

　　

<强>微信小程序图片宽高自适应

　　

1。以前将小程序图片宽度设置为屏幕宽度:

　　 　　 　　imageLoad:函数(){ 　　this.setData ({ 　　.windowWidth imageWidth: wx.getSystemInfoSync () 　　}) 　　} 　　之前 　　 　　

2。现在:

　　 　　 　　.imgClass { 　　宽度:100大众; 　　} 　　之前 　　 　　

<>强解析:
　　

　　

CSS3引入的“大众”和“vh”基于宽度/高度相对于窗口大小
　　

　　


　　

　　

以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。
　　

　　

参照演示案例对照下面四个容器的css样式:

　　 　　 　　.demo { 　　宽度:100大众; 　　字体大小:10大众;/*宽度为窗口100%,字体大小为窗口的10% */} 　　.demo1 { 　　宽度:80大众; 　　字体大小:8大众;/*宽度为窗口80%,字体大小为窗口的8% */} 　　.demo2 { 　　宽度:50大众; 　　字体大小:5大众;/*宽度为窗口50%,字体大小为窗口的5% */} 　　.demo3 { 　　宽度:10大众; 　　高度:50 vh;/*宽度为窗口10%,容器高度为窗口的50% */} 　　 　　之前 　　 　　

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

微信小程序图片宽高自适应详解