What is the difference between rpx and px in mini program?

Difference: 1. rpx is a relative length unit, while px is a fixed length unit; 2. rpx can adapt to the resolution of the mobile phone and adapt to the current model, while px cannot adapt well to different resolutions. cell phone.

The operating environment of this tutorial: HarmonyOS 2.0 system, WeChat version 8.0.19, HONOR V30.

The difference between rpx and px in mini programs

In mini programs, the size is generally measured in px or rpx, where px is the pixel value in the traditional sense. , cannot adapt well to mobile phones with different resolutions, so rpx appears

1. rpx can adapt to the resolution of mobile phones and adapt to the current model

2. px is the absolute size.

rpx

rpx (responsive pixel): can be adapted according to the screen width. The specified screen width is 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels in total, then 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.

Device	rpx to px (screen width/750)	px to rpx (750/screen width)
iPhone5	1rpx = 0.42px	#1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 ​​Plus	1rpx = 0.552px	1px = 1.81 rpx

Suggestion: When developing WeChat mini programs, designers can use iPhone6 ​​as the standard for visual drafts.

Note: There will inevitably be some glitches on smaller screens, please try to avoid this when developing.

[Related learning recommendations: 小program development tutorial]

The above is the detailed content of What is the difference between rpx and px in mini program?. For more information, please follow other related articles on the PHP Chinese website!