Shulou(Shulou.com)06/01 Report--

This article mainly explains "how Mini Program does adaptive screen height". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought. Let's study and learn "how Mini Program does adaptive screen height".

1. The Mini Program picture width was previously set to the screen width:

ImageLoad: function () {this.setData ({imageWidth: wx.getSystemInfoSync (). WindowWidth})}

two。 Now:

.imgClass {width: 100vw;}

Parsing:

"vw" and "vh" introduced by CSS3 are based on width / height relative to window size

"vw" = "view width"vh" = "view height"

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

Compare the css style of the following four containers with reference to the demo case:

.demo {width: 100vW; font-size: 10vW; / * window width 100%, font size 10% * /} .demo1 {width: 80vw; font-size: 8vw; / * width 80% of window, font size 8% of window * / .demo2 {width: 50vw; font-size: 5vW; / * width of window 50%, font size 5% of window * /} .demo3 {width: 10vw Height: 50vh; / * the width is 10% of the window, and the height of the container is 50% of the window * /} Thank you for your reading. The above is the content of "how Mini Program adapts the screen height". After the study of this article, I believe you have a deeper understanding of how Mini Program adapts the screen height, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.