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.
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!