RPX (Responsive Pixel

  • RPX is the unique size unit of wechat mini program to solve screen adaptation
  • The screen width is 750rpx, regardless of size
  • By setting the size of elements and fonts with RPX, applets can automatically adapt to different screen sizes

Conversion between RPX and PX

  • In general web development, the most common unit of pixels is the px
  • In applets, it is recommended to use RPX as a responsive unit of pixels
  • Take iPhone6 as an example. The screen width of iPhone6 is 375px and there are 750 physical pixels, so 750rpx = 375px = 750 physical pixels

The formula is: 1 RPX = 0.5 px = 1 physical pixel

For example, on the iPhone6, if you want to draw a box that is 100px wide and 30px high, convert it into RPX units, which are 200rpx wide and 60rpx high

Relationship between RPX and iPhone design draft

Official advice: when developing wechat mini program, designers can take iPhone6 as the standard of visual draft. If you want to draw the page of small program according to iPhone6 design draft, you can directly replace the unit PX with RPX. For example: suppose iPhone6 design, want to draw a width and height of 200px box, convert RPX to 200rpx

With iPhone6 as the design standard, the unit px is directly replaced with RPX

Designers in the design draft, is 2 times, that is to say, if there is a wide on the design draft high 200 px box, then it onto the page was in fact a high of 100 px wide box, then converted to the RPX need 2 times, and then became the RPX, 200 is the same with the Numbers on the design draft, So we can keep the numbers the same and just replace the units px with RPX

Original link: blog.csdn.net/weixin_4182…