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:
- If the design draft is 750px
750 px = 750 rpx
1px = 1rpx - 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);
}