小程序的rpx单位rpx是小程序最常用的单位它可以自适应屏幕，例如设计图的分辨率是7501334（iphone6尺寸）

首先先写一个简单的demo 当前的项目结构是这样的第一个页面加载index

在index.wxml写view相当于是div

<view class="container">
  <view class="red"></view>
  <view class="blue"></view>
  <view class="yellow"></view>
  <view class="pink"></view>
</view>

然后在index.wxss写样式使用的是flex布局

page{
  height: 100%;
  background: #b4d4da;
}
.container{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.red,.blue,.yellow,.pink{
  margin-top: 30rpx;
  width: 300rpx;
  height: 150rpx;
}

.red{
  background: red;
}

.blue{
  background: blue;
}

.yellow{
  background: yellow;
}

.pink{
  background: pink;
}

然后点击编译最后的效果就出来了

rpx是小程序最常用的单位它可以自适应屏幕，例如设计图的分辨率是7501334（iphone6尺寸）,那么设计图标注100，在项目中就可以写100rpx,因为rpx跟iphone6的尺寸的比例是1：1。为什么不能用px,因为px是逻辑分辨率，css写iphone6的尺寸是375667，所以要用px做单位的话，设计图的宽高要除以2来用。所以一般都是建议用rpx单位。