收藏
回答

小程序rpx计算高度 不同手机模式下 视觉效果不一致的问题

<view class='view1'>

   <view class='fl'><view wx:for='{{10}}' class='view1_1'>{{index+1}}</view></view>

   <view class='fr'>

       <view class='view1_2'></view>

   </view>

</view>


.view1{width: 100%;height: 1090rpx;background: #000;box-sizing: border-box;overflow: hidden}

.fl{float: left}

.fr{float: right}

.view1_1{width: 500rpx;height: 100rpx;background: #fff;}

.view1_2{width: 200rpx;height: 1000rpx;background: yellow}


左侧白色部分是一共10个view 每个高度为100rpx;右侧黄色部分一个view高度为1000rpx;但是在iphone5的视觉效果高度不一致;什么原因 如何解决?


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

1 个回答

  • 张进涛
    张进涛
    2019-01-24

    小程序的像素rpx 是根据 iphone6的基础来计算的 比例是2:1 即100rpx = 50px    但是在不同的设备中具体的换算比例已经出现问题了  在iphone5中 100rpx = 42px  理论上1000rpx = 420px  但是在  像素超过200rpx的时候换算比已经有之前的2.38变成了2.35  而在微信的设计中2.00 比例越大换算出的像素越小

    2019-01-24
    有用
    回复 6
    • 2019-01-25

      但是左侧和右侧的整体实际高度都是1000rpx 在同一个机型下 所以换算比例是一样的 最后显示的高度也应该一致啊 为什么不一致呢?

      2019-01-25
      回复
    • 张进涛
      张进涛
      2019-01-25回复

      一个是整体换算 另一个是分开换算  如果你给10个view的父容器定为1000rpx  然后每个是百分之十 那么就会等同了  单独的100rpx 换算和整体的1000rpx换算都有误差  独立的小份越多误差越大

      2019-01-25
      回复
    • 2019-01-25回复张进涛

      哦哦 知道如何解决类似问题了 谢谢啦

      2019-01-25
      回复
    • Jarvis
      Jarvis
      2021-01-13回复
      求教,怎么解决的
      2021-01-13
      回复
    • TiAmo
      TiAmo
      2021-05-18
      请问你解决了吗?  我也碰到这个问题了
      2021-05-18
      回复
    查看更多(1)
登录 后发表内容