首页 / 更多教程 / 微信小程序里多出来的奇怪宽度

微信小程序里多出来的奇怪宽度

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序里多出来的奇怪宽度，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含873字，纯文字阅读大概需要2分钟。

内容图文

最近在看微信小程序相关的东西，写页面的时候，因为一直以Iphone6作为标准调试（微信官方建议以Iphone6调试），下面以实际的案例讲解以rpx会引发的问题

wxml:

<view class='view1'>
  <view class='view2'>
  
  </view>

  <view class='view3'>
  
  </view>
</view>

wxss:

.view1 {
  width: 700rpx;
  height: 60rpx;
  display: flex;
  background: red;
  flex-wrap: wrap;
}
.view1 .view2 {
  width: 300rpx;
  height: 60rpx;
  background: black;
}
.view1 .view3 {
  width: 400rpx;
  height: 60rpx;
  background: yellow;
}

在Iphone6+下，会发现整体宽度会多出来一点，实际效果如下

微信小程序里多出来的奇怪宽度 - 文章图片

理论上 这个时候，两个盒子 view2 和 view3 应该覆盖了整个父级的view1的背景色，右侧不应该再会出现红色背景了

在Iphone6下正常

微信小程序里多出来的奇怪宽度 - 文章图片

分别将`view1`和`view3`的盒子宽度调成(701rpx,401rpx),(702rpx,402rpx),分别将rpx按照比例转化成px

微信小程序里多出来的奇怪宽度 - 文章图片

总结如下：

1.微信小程序的尺寸单位rpx存在缺陷，实际在页面wxss代码编译时，依旧是转化为了px

2.将rpx转化为px以后，只取整数部分，小数部分会直接被舍去，因为会出现多出来1px的宽度

内容总结

以上是互联网集市为您收集整理的微信小程序里多出来的奇怪宽度全部内容，希望文章能够帮你解决微信小程序里多出来的奇怪宽度所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/847600.html

来源：【匿名】