收藏
回答

rpx在flex布局下,精度不准的问题

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 客户端 最新 最新

如图所示,第一行方块为flex布局,第二行方块为absolute布局,方块宽度100,间距10,容器宽度都是660,使用rpx为布局单位的时候,两行的方块位置慢慢出现差异,黄线为一个参考线。单位全改成px,两行方块是完全对齐的。无论模拟器还是真机,iphone6P和iphone7P均有问题,安卓未测试


回答关注问题邀请回答
收藏

1 个回答

  • 小程序技术专员-june
    小程序技术专员-june
    2019-04-03

    按照 rpx 的定义,在转成 px 的情况下,这里是可能存在偏差的。是会有长小数存在的,如 110rpx * 0.42 px/rpx 会等于 46.199999999999996px,而 flex 则是浏览器自动计算,不是 js 计算,所以不会有这个问题。



    2019-04-03
    有用
    回复 4
    • 子非鱼
      子非鱼
      2019-04-08

      现在出问题的是flex布局。。

      2019-04-08
      回复
    • 小程序技术专员-june
      小程序技术专员-june
      2019-04-08回复子非鱼

      看你的代码片段,出问题的应该是 absolute 而不是 flex 吧。

      2019-04-08
      回复
    • 子非鱼
      子非鱼
      2019-04-08回复小程序技术专员-june

      https://developers.weixin.qq.com/s/BcgjOtmd7r7o,已更改代码,如果flex布局的精度是准确的,那么6个红色的间隙应该等宽才对

      2019-04-08
      回复
    • 小程序技术专员-june
      小程序技术专员-june
      2019-04-08回复子非鱼

      不是,其实是你这里给了定宽,容器是 660 rpx,那么实际像素是 Math.floor(660 * 320 / 750) = 281 px。

      而子项是 110 rpx,那么实际像素是 Math.floor(110 * 320 / 750) = 46px。而这里的偏移并不是像 absolute 那样由 js 计算指定,而是让浏览器自动计算,这样在 flex 布局里就不是均匀分配了,因为 46 * 6 = 276,而不是 281(其实就是小数被干掉导致的)。


      你想达到你的效果,可以在 .child 上将 width: 100rpx 改成 flex: 1,让电脑自动计算就行。

      2019-04-08
      回复
登录 后发表内容