最近在看微信小程序相关的东西,写页面的时候,因为一直以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. AtCoder AGC022C Remainder Game (图论)

    题目链接 https://atcoder.jp/contests/agc022/tasks/agc022_c 题解 大水题一道 就他给的这个代价,猜都能猜到每个数只能用一次 仔细想想,我们肯定是按顺序 ...

  2. python学习之路(7)

    调用函数 Python内置了很多有用的函数,我们可以直接调用. 要调用一个函数,需要知道函数的名称和参数,比如求绝对值的函数abs,只有一个参数.可以直接从Python的官方网站查看文档: http: ...

  3. linux 系统的 cache 过大,解决方案

    linux buff/cache过大,清理脚本 2018年06月20日 13:44:53 taozhe666 阅读数:6500   三条指令: sync echo 1 > /proc/sys/v ...

  4. jpa repostiory

    JpaRepository的查询   image.png   image.png Spring Data JPA框架在进行方法名解析时,会先把方法名多余的前缀截取掉,比如 find.findBy.re ...

  5. java 多线程相关概念总结

    前言 本篇文章介绍一些多线程的相关的深入概念.理解后对于线程的安全性会有更深的理解. 先说一个格言,摘自Java核心技术:如果向一个变量写入值,而这个变量接下来可能会被另一个线程读取:或者一个变量读值 ...

  6. 2018-2019-2 网络对抗技术 20165232 Exp 8 Web基础

    2018-2019-2 网络对抗技术 20165232 Exp 8 Web基础 原理与实践说明 1.实践内容概述 Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与 ...

  7. js函数收集

    常见js函数收集: 转自:http://www.qdfuns.com/notes/36030/2eb2d45cccd4e62020b0a6f0586390af.html //运动框架 function ...

  8. SQLite 数据类型与C#数据类型对应表

        SQLite 数据类型 C# 数据类型   BIGINT Int64   BIGUINT UInt64   BINARY Binary   BIT Boolean 首选 BLOB Binary ...

  9. LVM创建过程

    磁盘挂载需求/cachesys 50G /journal 300G /wij 50G /dthealth 20G /data 500G /backup 500G #第1步,创建pv,并查状态信息.ls ...

  10. WPF 打字效果

    看到有篇是用关键字动画来做的,感觉性能不是很好,万一字太多,比如几百上千个字那会加几百上千个关键帧... 下面是我自己写的: public MainWindow() { InitializeCompo ...