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的宽度

  • 相关阅读:
    第八讲、原型模式
    第七讲、建造者模式
    第六讲、抽象工厂模式
    第五讲、工厂方法模式
    第四讲、简单工厂模式
    第三讲、策略模式
    第二讲、备忘录模式
    第一讲、单例模式
    二、中国黑客
    java 17
  • 原文地址:https://www.cnblogs.com/adobe-lin/p/9871487.html
Copyright © 2011-2022 走看看