小程序rpx计算高度 不同手机模式下 视觉效果不一致的问题
发布于 4 年前 作者 hshi 8808 次浏览 来自 问答

<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 回复

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

回到顶部