微信小程序里多出来的奇怪宽度
最近在看微信小程序相关的东西,写页面的时候,因为一直以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的宽度
微信小程序里多出来的奇怪宽度的更多相关文章
- 微信小程序里如何用阿里云上传视频,图片。。
纯手写,踩了半天多的坑干出来了... 网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里. 话不多说上代码了. upvideo(){ var aliOssParams = ...
- 微信小程序里使用 Redux 状态管理
微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...
- 在微信小程序里使用 watch 和 computed
在开发 vue 的时候,我们可以使用 watch 和 computed 很方便的检测数据的变化,从而做出相应的改变,但是在小程序里,只能在数据改变时手动触发 this.setData(),那么如何给小 ...
- 微信小程序里实现跑马灯效果
在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...
- 微信小程序里碰到的坑和小知识
本文作者:dongtao 来自:授权地址 本人低级程序员,以下bug不能确保在其它地方可以以相同的原因复现.同时, 出现很多bug的原因是小程序的基本知识还有编码的基本功不到位造成 路还很长,共勉 ...
- 微信小程序里的bug---video 的play()
微信小程序hidden转换后执行play()用真机测试不会播放.在调试器里可以. 解决方法,把hidden换成wx:if. 我刚开始以为网速问题,其实不是, 具体我也不知道为什,换上wxif解决了.
- 微信小程序里使用阿里巴巴矢量图标
登录 阿里巴巴矢量图标 (https://www.iconfont.cn) 选中图标,加入购物车图标 下载源代码 解析出来如下文件结构 有两种使用方式: 1)不转换成base64的文件 找到 icon ...
- 在微信小程序里自动获得当前手机所在的经纬度并转换成地址
效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置: 具体步骤: 1. 使用微信jssdk提供的getLocation API拿到经纬度: 2. 调用高德地图的api使用经纬度去换取地址的 ...
- 记录微信小程序里自带 时间格式 工具
微信小程序里面自己给了一个时间工具,是用来记录log日志,感觉可以记录下来,所以拿来自己用,以此记录: 直接传入 日期对象 进入 formatTime //得到下面格式的时间格式2017/07/22 ...
随机推荐
- 关于JavaScript的内存机制
一.背景 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 因为JavaScript具有自动垃圾回收机制,所以对于前端开发来说,内存 ...
- leetcode-easy-design-384 Shuffle an Array
mycode class Solution(object): def __init__(self, nums): """ :type nums: List[int] &q ...
- 全面解读php-正则表达式
一.正则表达式基础内容 注: 1.通用原子: \d : 数字. \D : 除了数字. \w : 数字,字母,下划线.\W : 除了数字,字母,下划线. \s : 空白符 . \S : 除了空白符 ...
- 【转】C++ const成员变量和成员函数(常成员函数)
转:http://c.biancheng.net/view/2230.html 在类中,如果你不希望某些数据被修改,可以使用const关键字加以限定.const 可以用来修饰成员变量和成员函数. co ...
- C++ Map实践
实践如下: #include <iostream> #include <map> #include <string> #include <typeinfo&g ...
- 使用hash方法切割文件
如果有大型数据文件(如每行为url或者ip或者单词等的),以G为单位的,处理的时候需先切分.普通切分方法直接根据数据条数切分,得到的每个文件大小相近. 但是有时需要将相同数据放到相同文件中.可以使用h ...
- Anaconda 配置 Python 环境
原文地址:Anaconda 配置 Python 环境 0x00 环境 Anaconda: 2019.03 Python: 3.6.8 0x01 Linux 安装 Anaconda 交互安装 Anaco ...
- Computer Network Homework2’s hard question
Computer Network Homework2’s hard question 2. What is the signal which is used to modulate the origi ...
- 深入浅出JavaScript(中文版)__莫里森 初读笔记
创建变量,使用关键字var; 创建常量,使用关键字const; 大驼峰用于对象,小驼峰用于变量和函数. 在试图相加数字时意外做了字符串相连,是种常见的JavaScript错误.如果想做数字相加,请确定 ...
- poatman接口测试--初试
接到测试任务,对两个商品接口,进行接口测试 测试工具:postman 域名:rap2查找的或询问开发, 接口的参数规则:参考rap2的备注 开发没有添加详细说明的,让开发补充说明规则,及定义的返回状态 ...