rpx单位的解释

首先如果我们一开始是在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个物理像素的,现在只能放一个了,那文字也缩小了。

  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值