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

青灯夜游
Release: 2022-02-09 11:59:25
Original
26954 people have browsed it

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.

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template