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

    百度百科 传送门 W3school 传送门 XML语言(可扩展标记语言):是一种表示数据的格式,按照xml规则编写的文本文件称为xml文件 Learn 一.编写XML文件 二.DTD约束 三.sche ...

  2. 大哥带的DOM-XSS进阶eval构造XSS

    0X01源码分析 那么我们可以如何来构造语法呐??已知eval函数可以执行js 最终的输出是eval(this.xss="你提交的参数";) 那我们是不是可以从参数这里构造一个js ...

  3. d3.js+svg的树形图

    效果图 数据 { "name":"中国", "children": [ { "name":"浙江" ...

  4. mybatis逆向工程的text类型的一个小坑

    数据库如果配有text的数据类型的 mybatis生成逆向工程的时候会单独将text提取出来 ByExampleWithBLOBs 会生成上面后缀的查询和修改的语句 因此查询起来会产生没有必要的麻烦, ...

  5. C++入门经典-例3.23-使用嵌套循环输出乘法口诀表

    1:代码如下: // 3.23.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iomanip> #incl ...

  6. What is the most efficient way to deep clone an object in JavaScript?

    What is the most efficient way to deep clone an object in JavaScript? Reliable cloning using a libra ...

  7. 解决 Ubuntu 18.10 使用较新的独立显卡输出无法初始化图形界面并配置深度学习开发环境

    原文地址:解决 Ubuntu 18.10 使用较新的独立显卡输出无法初始化图形界面并配置深度学习开发环境 0x00 配置 硬件 OS: Ubuntu 18.10 Base Board: ASUS WS ...

  8. Mimikatz 攻防杂谈

    前几天看到了老外一篇讲 mimikatz 防御的文章,感觉行文思路还不错,但是内容稍有不足,国内也有一篇翻译,但是只是照着错误翻译的,所以就萌生了把那篇优秀文章,翻译复现,并加入其它一些内容,本文只是 ...

  9. 使用conda安装命令时一直出现问题,因为从2019年4月添加的国内镜像都不能用了

    安装过程中出现以下问题:(历尽千辛万苦,终于才查到原来是清华源,腾讯源都不能用了)The remote server could not find the noarch directory for t ...

  10. flutter button

    flutter button button类型: RaisedButton : 凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自MaterialButt ...