Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Uni-app's exclusive powerful adaptive units upx, rpx, cannot be dynamically assigned a solution...

uni-app uses upx as the default size unit. upx is a unit relative to the base width and can be adapted to the screen width. uni-app specifies the base screen width as 750upx.

Developers can calculate the upx value of page elements based on the design draft base width. The conversion formula between the design draft 1px and the frame style 1upx is as follows:
Design draft 1px / Design draft base width = frame style 1upx / 750upx

for example:
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 should be set to: 750 * 100 / 640, the result is: 117upx.
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 in uni-app should be set to: 750 * 200 / 375, the result is: 400upx.

As shown in the following figure, the width of the design is 1920

------According to the formula设计稿宽度 / 750 = 比率 Then 1920/750=2.56 Calculate the percentage of the 1920 width design draft to the standard 750------

To facilitate the click in Hbuilder X工具>设置>语言服务配置Scroll to the bottom and there is a px to rpx/upx conversion. Put the ratio calculated above into it.

actual effect:

In this way, the px size you enter will be automatically converted to the corresponding upx size.

Just select upx