小程序自适应尺寸单位rpx和flex弹性布局的使用详解

我们之前知道一个小程序由四个页面组成，但是我们打包运行到手机上的时候，首页屏幕大小分辨率不一样的时候就会有内容显示的差别，所以小程序提供了自适应尺寸的单位rpx，rpx会根据屏幕分辨率进行自适应大小。

我们可以看到官方文档的描素：

这里注意：小程序规定屏幕宽度是750rpx。

这里有一点，设计师在设计小程序UI的时候最好是根据iphone6的尺寸来进行设计，我们从图中可以看到，iphone6的情况下 1rpx = 0.5px，而如果是iphone5的情况下 1rpx=0.42px，iphone6s 1rpx = 0.552px，这就会影响到我们在编写小程序页面过程中的单位换算，所以选择iphone6的尺寸进行设计是最好的，也是最利于我们进行开发的。

更多rpx详情可以查看微信官方文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

flex布局

我们通常在开发网页的时候，要实现以下效果怎么弄呢？

按照以往网页的逻辑，编写几个li然后float浮动？但是在小程序不能这么写，我们要使用到flex弹性布局，下面具体来操作一下。

1.首先我们要编写一个最外层的view，然后编写四个item的view，在分别编写item里面的上半部分和下半部分

<viewclass="sort"><viewclass="sort_box"><viewclass="item"><viewclass="icon">后</view><text>后端</text></view><viewclass="item"><viewclass="icon">后2</view><text>后端2</text></view><viewclass="item"><viewclass="icon">后3</view><text>后端3</text></view><viewclass="item"><viewclass="icon">后4</view><text>后端4</text></view></view></view>

这里要注意啊，小程序没有div，都是使用view进行编写的。

我们在写完四个view之后就可以看到以下效果

一个垂直的item列表。

但是我们要把他变成向右水平排列，怎么操作呢？

2.设置最外层sort的css属性，首先我们要把sort_box view display设置成flex，设置这个让我们的sort_box容器变成弹性布局;然后设置flex的方向为水平方向row，然后在设置每个item之间的边距justify-content: space-around，效果图：

我们可以看到我们的四个item都成水平排列了，但是还没有达到上面的那种效果，所以我们还要编写item里面子项的wxss属性。

3.首先我们要设置sort_box 下item的字体居中

.sort_box.item{
  text-align: center;}

4.设置sort_box 下 item子项下的icon的属性，设置宽高，背景颜色，字体水平居中垂直居中，设置圆角百分之五十

.sort_box.item.icon{
  width:100rpx;
  height:100rpx;
  background-color: blue;
  line-height:100rpx;
  text-align: center;
  border-radius:50%;}

然后我们就可以实现上面的效果了

虽然代码很简单，这里还是贴一下index.wxml和index.wxss的代码：

index.wxml

<!--miniprogram/pages/index/index.wxml--><text>miniprogram/pages/index/index.wxml</text><viewclass="box">Hello Word</view><viewclass="sort"><viewclass="sort_box"><viewclass="item"><viewclass="icon">后</view><text>后端</text></view><viewclass="item"><viewclass="icon">后2</view><text>后端2</text></view><viewclass="item"><viewclass="icon">后3</view><text>后端3</text></view><viewclass="item"><viewclass="icon">后4</view><text>后端4</text></view></view></view>

index.wxss

/* miniprogram/pages/index/index.wxss */.box{
  width:100rpx;
  height:100rpx;
  background-color: red;}.sort_box{
  display: flex;
  flex-direction: row;
  margin:030rpx;
  justify-content: space-around;}.sort_box.item{
  text-align: center;}.sort_box.item.icon{
  width:100rpx;
  height:100rpx;
  background-color: blue;
  line-height:100rpx;
  text-align: center;
  border-radius:50%;}

这样就可以实现我们的弹性布局了。