收藏
回答

rpx单位如何实现的?

前段时间我特意研究了下rem的实现并且自己写了rem响应式代码和css方式的手机端响应式方式。

但是在这个之前我是特别翻查了很久的关于微信rpx实现方式,但是网上都没有。有大神给解释。

上代码的那种最好

希望有大神能给出代码实现逻辑就行

最后一次编辑于  03-11  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • 铭锋科技
    铭锋科技
    03-09

    尺寸单位

    在WXSS中,引入了rpx(responsive pixel)尺寸单位。引用新尺寸单位的目的是,适配不同宽度的屏幕,开发起来更简单。

    如图2-9所示,同一个元素,在不同宽度的屏幕下,如果使用px为尺寸单位,有可能造成页面留白过多。

    图2-9 使用px尺寸单位,iPhone5与iPad视觉对比

    修改为rpx尺寸单位,效果如图2-10所示。

    图2-10 使用rpx尺寸单位, iPhone5与iPad视觉对比

    小程序编译后,rpx会做一次px换算。换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx = 1px。

    举个例子:iPhone6屏幕宽度为375px,共750个物理像素,那么1rpx = 375 / 750 px = 0.5px。

    图2-11 常用机型rpx尺寸换算表


    03-09
    赞同
    回复 1
    • 海天酱油
      海天酱油
      03-11

      额,原理懂,但是物理像素这块如何确定呢?

      03-11
      回复