公告列表
公告列表
收藏
回答

rpx计算问题


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

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

8 个回答

  • LastLeaf
    LastLeaf
    2017-09-21

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

    2017-09-21
    有用
    回复
  • 2017-09-22

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

    2017-09-22
    有用
    回复
  • 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
    有用
    回复
  • 2017-09-22



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

    2017-09-22
    有用
    回复
  • 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
    有用
    回复
  • 2017-09-21

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

    2017-09-21
    有用
    回复
  • 2017-09-21

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


    2017-09-21
    有用
    回复
  • polar king
    polar king
    2017-09-21

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

    2017-09-21
    有用
    回复
请 登录 后发表内容
相关问题
相关文档