zoukankan      html  css  js  c++  java
  • 微信小程序里多出来的奇怪宽度

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

  • 相关阅读:
    使用IDEA打包出现“Cleaning up unclosed ZipFile for archive”错误
    Kafka读取本地文件作为生产者
    Redis连接池
    如果javaapi长时间消费不到数据
    Redis 持久化的两种方式
    kafka结合streaming的两种方式
    二分法查找
    shell脚本学习
    Md5Utils
    idea添加jar包
  • 原文地址:https://www.cnblogs.com/adobe-lin/p/9871487.html
Copyright © 2011-2022 走看看