收藏
回答

rpx计算问题

问题模块
API和组件


问题描述看图片里面的文字

最后一次编辑于  2017-09-21
回答关注问题邀请回答
收藏

8 个回答

  • Dream Once Again
    Dream Once Again
    2017-09-22

    @@@@官方的可得给个回复哦哦

    2017-09-22
    赞同
    回复
  • Dream Once Again
    Dream Once Again
    2017-09-22



    这是HTML5页面1rem = 100px

    .goodslist {
      box-sizing: border-box;
      width: 100%;
      padding: .1rem;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;
    }
    .goods-item {
      width: 3.6rem;
      margin-bottom: .2rem;
      background-color: #fff;
      overflow: hidden;
    }

    <ul class="goodslist">

     <li>

       <a href="javascript:void(0);" class="goodsLink">

         <div class="goods-item">

           <div class="goods-cover">

             <img src="" class="img">

           </div>

           <div class="goods-intro"></div>

         </div>

       </a>

     </li>

     <li>

       <a href="javascript:void(0);" class="goodsLink">

         <div class="goods-item">

           <div class="goods-cover">

             <img src="" class="img">

           </div>

           <div class="goods-intro"></div>

         </div>

       </a>

     </li>

    </ul>




    2017-09-22
    赞同
    回复
  • Dream Once Again
    Dream Once Again
    2017-09-22



    这是在真机iPhone 7plus测试,如上截屏所示,中间那个间隔,明显太大

    2017-09-22
    赞同
    回复
  • Dream Once Again
    Dream Once Again
    2017-09-22
    .goodslist {
      box-sizing: border-box;
      width: 750rpx;
      padding: 10rpx;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;
    }
     
    .goods-item {
      width: 360rpx;
      margin-bottom: 10rpx;
      background-color: #fff;
      overflow: hidden;
    }
    <view class="goodslist">
      <view class="goods-item">
        <view class="goods-cover">
          <image src="" class="img"></image>
        </view>
        <view class="goods-intro"></view>

      </view>

      <view class="goods-item">
        <view class="goods-cover">
          <image src="" class="img"></image>
        </view>
        <view class="goods-intro"></view>
      </view>
    </view>

    这是我另外改用flex布局,在iphone6上面没有问题,在大屏手机上面,左右两个view中间那个间隔更大

    2017-09-22
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2017-09-21

    你好,rpx计算的时候,遇到小数会存在少量偏差。可以用flex等其他布局方式解决。

    2017-09-21
    赞同
    回复
  • Dream Once Again
    Dream Once Again
    2017-09-21

    那就是目前没有解决方法咯

    2017-09-21
    赞同
    回复
  • Dream Once Again
    Dream Once Again
    2017-09-21

    在iphone6上是没有问题的,在大屏上就会有问题


    2017-09-21
    赞同
    回复
  • polar  king
    polar king
    2017-09-21

    rpx本就不是一个实际值,碰到奇偶,小数差别更大

    2017-09-21
    赞同
    回复