How to calculate and convert px to rpx

When we make small programs, we will need to change the unit of some elements on the page from px to rpx.
Let me talk about the corresponding relationship:

  1. If the design draft is 750px
    750 px = 750 rpx
    1px = 1rpx
  2. If you change the screen width to 375px
    375 px = 750 rpx
    1px = 2rpx
    1rpx = 0.5px

Now suppose there is a requirement
. The width of an element in the design draft is 100px. How to convert it?

First take the above requirements to achieve different width page adaptation, the calculation formula is as follows

page px = 750 rpx
1px=750rpx/page
100px=750rpx*100/page

Now suppose that page = 375px
uses an attribute calc attribute, which can be calculated directly.
Both css and wxss support an attribute.
Note:
Do not leave spaces between 750 and rpx

view{
	height: 200rpx;
	font-size: 40rpx;
	width:calc(750rpx * 100 / 375);
}
Published 128 original articles · 52 praises · 20,000+ views

Guess you like

Origin blog.csdn.net/weixin_44523860/article/details/105180083