Da'sBlog

rpx教程

rpx默认把屏幕实际宽度分成750份。

那么在750物理宽度的iphone6上,实际宽度是750,1rpx =375/750= 0.5px

那么在640物理宽度的iphone5,实际宽度是640,物理宽度是320, 1rpx= 320/750 = 0.426666666666666px

所以如果你的设计稿假如是640的 就要用iphone5的像素计算,就要先转成实际像素, 然后把他750等分。

工作中我们的数值都是像素

所以要把设计稿的像素转成rpx

也就是说 实际像素320

页面有750份。

那么我们得到1px = 750/320像素 = 2.34375rpx

但我们的设计稿是640

那么我们的换算应该是1px = 750/640像素 = 2.34375rpx/2 = 1.171875rpx;

即在640下,60px的方块。这么计算

60*1.171875rpx; = 70.3125rpx

看似复杂换个角度想,无论任何屏幕都是750份,

那么你也可以估算出1等分大概是多少,计算出实际大小

这个与rem是类似的,

假如rem在375下,分成750份。 那么1rem = 1rpx =375/750= 0.5px
那么750下也是750份。
640下也是750份。

至于原理,
要始终明白一点
有个比值是不变的就是 分割数750,即基数。

我把面包分成5份,那么无论面包变大变小,那个分成5份占总体积的大小是不变。

而在这里,我们的的面包是320px大小,我分成了750份,1份大小即1rpx = 320/750。 那么当面包变成了640px,里面还是750份 一份大小 1rpx = 640/750。

好了
为了方便计算。
因为实际有些人喜欢多吃面包,所以不是每人都给一份,因为我有时候给某人多一点。而且我不可能都切完。我就用尺子量下我的面包宽度。要分一个100px的面包
那么640的面包 1px的面包大概是750/640 = 1.17rpx 如果我要给某人100px的面包,那么值就是1.17rpx *100 - 117rpx 也就是只需要给117份。

那么无论变大变小 无都不用管 他都是117份

但是如果是厘米的话我就估算不出来了。因为大小变了。

坚持原创技术分享,您的支持将鼓励我继续创作!