首先如果我们一开始是在640px单位下来设计的页面,那么如果我们想要我们的页面能够自适应宽度,使用rpx,那么因为rpx是在标准物理像素750pt下的单位,
因为我们想得到的750pt下的宽度所以:
用 750pt / 固定设计的设备宽度(物理像素) 得到比例, 再 乘以 * 固定设计的元素宽度 = 在750pt下会呈现的物理像素宽度。
比如 750pt / 640pt * 10pt = 11.7pt, 在750pt下就会显示11.7pt的宽度,保持整体比例不变
之后,屏幕宽度变大变小了,都是按照 屏幕宽度 / 750pt * 750下显示的元素pt宽度, 显示的pt宽度。
实际使用时,出来的物理像素pt,把他除以对应的dpr,就能得在这个设备上实际显示的逻辑像素px了。
那为什么不直接用屏幕宽度 / 设计稿宽度呢,为什么设置基准宽度呢,我也不知道,
可能是想大家都用750px的宽度来设计,最后抄别人的方便吧,不然抄的时候还要把自己的设计稿宽度和别人的设计稿宽度换算一下比例,再把元素宽度抄上去,太麻烦
最后再说明一下,iphone6的物理像素是750pt,1个逻辑像素能放2个物理像素,所以逻辑像素是375px,css用的是逻辑像素,当浏览器页面缩小时,一个逻辑像素能放更少的物理像素,让逻辑像素变多了,比如1024,变成了2048,本来1个逻辑像素能放2个物理像素的,现在只能放一个了,那文字也缩小了。