最近在看微信小程序相关的东西,写页面的时候,因为一直以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. 关于JavaScript的内存机制

    一.背景 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 因为JavaScript具有自动垃圾回收机制,所以对于前端开发来说,内存 ...

  2. leetcode-easy-design-384 Shuffle an Array

    mycode class Solution(object): def __init__(self, nums): """ :type nums: List[int] &q ...

  3. 全面解读php-正则表达式

    一.正则表达式基础内容 注: 1.通用原子: \d : 数字.  \D : 除了数字. \w : 数字,字母,下划线.\W : 除了数字,字母,下划线. \s  : 空白符 . \S : 除了空白符  ...

  4. 【转】C++ const成员变量和成员函数(常成员函数)

    转:http://c.biancheng.net/view/2230.html 在类中,如果你不希望某些数据被修改,可以使用const关键字加以限定.const 可以用来修饰成员变量和成员函数. co ...

  5. C++ Map实践

    实践如下: #include <iostream> #include <map> #include <string> #include <typeinfo&g ...

  6. 使用hash方法切割文件

    如果有大型数据文件(如每行为url或者ip或者单词等的),以G为单位的,处理的时候需先切分.普通切分方法直接根据数据条数切分,得到的每个文件大小相近. 但是有时需要将相同数据放到相同文件中.可以使用h ...

  7. Anaconda 配置 Python 环境

    原文地址:Anaconda 配置 Python 环境 0x00 环境 Anaconda: 2019.03 Python: 3.6.8 0x01 Linux 安装 Anaconda 交互安装 Anaco ...

  8. Computer Network Homework2’s hard question

    Computer Network Homework2’s hard question 2. What is the signal which is used to modulate the origi ...

  9. 深入浅出JavaScript(中文版)__莫里森 初读笔记

    创建变量,使用关键字var; 创建常量,使用关键字const; 大驼峰用于对象,小驼峰用于变量和函数. 在试图相加数字时意外做了字符串相连,是种常见的JavaScript错误.如果想做数字相加,请确定 ...

  10. poatman接口测试--初试

    接到测试任务,对两个商品接口,进行接口测试 测试工具:postman 域名:rap2查找的或询问开发, 接口的参数规则:参考rap2的备注 开发没有添加详细说明的,让开发补充说明规则,及定义的返回状态 ...