2024-07-12
한어Русский язык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