WeChat small program picture wide adaptive detailed explanation

WeChat small program picture wide adaptive

1. Previously set the width of the small program image to the screen width:

  imageload: function () {this.setdata ({imagewidth: wx.getsysteminfosync (). Windowwidth}}  

2. Now:

  .imgClass {width: 100vw;}  

analytical:

CSS3 introduced “VW” and “VH” based on width / height relative to window size

“vw” = “view width” “VH” = “view height”

The above we call the window unit allows us to be closer to the browser window to define the size.

Refer to the Demo case control CSS style:

  .demo {Width: 100vw; font-size: 10vw; / * Width is 100%, the font size is 10% * /}. Demo1 {width: 80vw; font-size: 8vw; / * Width is 80%, the font size is 8% * /}. Demo2 {Width: 50vw; font-size: 5vw; / * Width is 50% window, 5% * /} of the font size is * /}. demo3 {width: 10vw; height: 50VH; / * WideThe degree is 10% window, the container is 50% * /}  

Thank you, I hope to help everyone, thank you for your support of this site!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment