小程序
小游戏
企业微信
微信支付
扫描小程序码分享
如图所示,第一行方块为flex布局,第二行方块为absolute布局,方块宽度100,间距10,容器宽度都是660,使用rpx为布局单位的时候,两行的方块位置慢慢出现差异,黄线为一个参考线。单位全改成px,两行方块是完全对齐的。无论模拟器还是真机,iphone6P和iphone7P均有问题,安卓未测试
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
按照 rpx 的定义,在转成 px 的情况下,这里是可能存在偏差的。是会有长小数存在的,如 110rpx * 0.42 px/rpx 会等于 46.199999999999996px,而 flex 则是浏览器自动计算,不是 js 计算,所以不会有这个问题。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
现在出问题的是flex布局。。
看你的代码片段,出问题的应该是 absolute 而不是 flex 吧。
https://developers.weixin.qq.com/s/BcgjOtmd7r7o,已更改代码,如果flex布局的精度是准确的,那么6个红色的间隙应该等宽才对
不是,其实是你这里给了定宽,容器是 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,让电脑自动计算就行。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
按照 rpx 的定义,在转成 px 的情况下,这里是可能存在偏差的。是会有长小数存在的,如 110rpx * 0.42 px/rpx 会等于 46.199999999999996px,而 flex 则是浏览器自动计算,不是 js 计算,所以不会有这个问题。
现在出问题的是flex布局。。
看你的代码片段,出问题的应该是 absolute 而不是 flex 吧。
https://developers.weixin.qq.com/s/BcgjOtmd7r7o,已更改代码,如果flex布局的精度是准确的,那么6个红色的间隙应该等宽才对
不是,其实是你这里给了定宽,容器是 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,让电脑自动计算就行。