最近在看微信小程序相关的东西,写页面的时候,因为一直以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的宽度

微信小程序里多出来的奇怪宽度的更多相关文章

  1. 微信小程序里如何用阿里云上传视频,图片。。

    纯手写,踩了半天多的坑干出来了... 网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里. 话不多说上代码了. upvideo(){ var aliOssParams = ...

  2. 微信小程序里使用 Redux 状态管理

    微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...

  3. 在微信小程序里使用 watch 和 computed

    在开发 vue 的时候,我们可以使用 watch 和 computed 很方便的检测数据的变化,从而做出相应的改变,但是在小程序里,只能在数据改变时手动触发 this.setData(),那么如何给小 ...

  4. 微信小程序里实现跑马灯效果

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...

  5. 微信小程序里碰到的坑和小知识

    本文作者:dongtao   来自:授权地址 本人低级程序员,以下bug不能确保在其它地方可以以相同的原因复现.同时, 出现很多bug的原因是小程序的基本知识还有编码的基本功不到位造成 路还很长,共勉 ...

  6. 微信小程序里的bug---video 的play()

    微信小程序hidden转换后执行play()用真机测试不会播放.在调试器里可以. 解决方法,把hidden换成wx:if. 我刚开始以为网速问题,其实不是, 具体我也不知道为什,换上wxif解决了.

  7. 微信小程序里使用阿里巴巴矢量图标

    登录 阿里巴巴矢量图标 (https://www.iconfont.cn) 选中图标,加入购物车图标 下载源代码 解析出来如下文件结构 有两种使用方式: 1)不转换成base64的文件 找到 icon ...

  8. 在微信小程序里自动获得当前手机所在的经纬度并转换成地址

    效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置: 具体步骤: 1. 使用微信jssdk提供的getLocation API拿到经纬度: 2. 调用高德地图的api使用经纬度去换取地址的 ...

  9. 记录微信小程序里自带 时间格式 工具

    微信小程序里面自己给了一个时间工具,是用来记录log日志,感觉可以记录下来,所以拿来自己用,以此记录: 直接传入 日期对象 进入 formatTime //得到下面格式的时间格式2017/07/22 ...

随机推荐

  1. 分布式-信息方式-JMS信息结构

    JMS的消息结构JMS消息由以下几部分组成:消息头,属性和消息体消息头包含消息的识别信息和路由信息,消息头包含一些标准的属性如下:1: JMSDestination:由send方法设置2: JMSDe ...

  2. springboot 测试发送邮件

    首先在pom文件引入依赖: <!--email依赖 --> <dependency> <groupId>org.springframework.boot</g ...

  3. Swagger常用参数用法

    别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/m ...

  4. 套接字I/O函数write/read writev/readv send/recv sendto/recvfrom sendmsg/recvmsg

    函数原型 read/write系原型 #include <unistd.h> ssize_t read(int fd, void *buf, size_t count); #include ...

  5. 使用C#语言,将DataTable 转换成域模型

    DataTable dt = SqlHelper.Query(strQuery); ) * size).Take(pagesize); List<Model> listData = new ...

  6. centos6 升级php版本

    配置yum源 追加CentOS 6.8的epel及remi源. # rpm -Uvh http://ftp.iij.ad.jp/pub/linux/fedora/epel/6/x86_64/epel- ...

  7. 全面解读php-开发环境及配置

    一.版本控制软件 1.集中式 (CVS和 SVN) 中间有一个中央服务器,所有的客户机都会把版本信息上传到中央服务器里,版本信息只在中央服务器里保存,当我们去上传或者下载的时候 ,都是从中央服务器来连 ...

  8. tomcat 日志拆分

    一.用cronolog分割tomcat的catalina.out文件 1.编译安装cronologwget http://cronolog.org/download/cronolog-1.6.2.ta ...

  9. 用Python将二进制文件转化为数组并以文件形式存储

    最近在学习Python,发现Python语言非常适合文件的批处理操作.本文将介绍一下用Python如何实现将一个二进制bin文件转化为一个常量数组的.c文件存储起来.这为我们在一些没有文件系统不能调用 ...

  10. 【flask】表单-上传文件

    依赖: flask-wtf upload_case.html <!DOCTYPE html> <html lang="en"> <head> & ...