[Small program] Use uni-app to build a small program environment-size unit

uni-app Supported common css units include px, rpx

px is the screen pixel
rpx is responsive px, a dynamic unit that adapts to the width of the screen. Based on a 750 wide screen, 750rpx happens to be the width of the screen. The screen becomes wider and the actual display effect of rpx will be enlarged proportionally.

The vue page supports ordinary H5 units, but not in nvue:

The default root font size of rem is screen width / 20 (WeChat applet, headline applet, App, H5)
vh viewpoint height, window height, 1vh is equal to 1% of window height
vw viewpoint width, window width, 1vw is equal to 1% of window width

rpx Detailed description:

WeChat applet designed rpx to solve this problem, uni-app and it is supported on the App side and H5 side rpx.
rpx is a unit relative to the reference width, and can be adaptive according to the screen width.
uni-app Specifies the screen reference width of 750rpx.
Developers can calculate the rpx value of the page element based on the base width of the design draft. The conversion formula of the design draft 1px and the frame style 1rpx is as follows:　
design draft 1px / design draft base width = frame style 1rpx / 750rpx　

In other words, the uni-app formula for calculating the width of the page element in :

750 * 元素在设计稿中的宽度 / 设计稿基准宽度
for example:
1. If the width of the design draft is 750px, and the width of element A on the design draft is 100px, then the width of element A in uni-app it should be set to:, the 750 * 100 / 750result is: 100rpx.
2. If the width of the design draft is 640px, and the width of element A on the design draft is 100px, then the width of element A in uni-app it should be set to:, the 750 * 100 / 640result is: 117rpx.
3. If the width of the design draft is 375px, and the width of element B on the design draft is 200px, then the width of element B uni-app inside should be set to:, the 750 * 200 / 375result is: 400rpx.

Tips

Note that rpx is a unit related to width. The wider the screen, the larger the actual pixels. If you do n’t want to scale according to the screen width, you should use px units.
If the developer also uses rpx in the font or height, it should be noted that this writing means that as the screen becomes wider, the font will become larger and the height will become larger. If you need a fixed height, you should use px.
rpx does not support dynamic horizontal and vertical screen switching calculation, using rpx is recommended to lock the screen orientation
Designers can use iPhone6 as the standard for visual drafts.
If the design draft is not 750px, HBuilderX provides tools for automatic conversion, see: https://ask.dcloud.net.cn/article/35445 .
On the App side, the units involved in titleNView in pages.json or the plus api written on the page only support px, not rpx.
Early uni-app provided upx, it has been recommended to change to rpx, see details