小程序WXSS布局

1. 尽量采用flex 布局,指定flex-direction是row( 从左到右)还是column (从上到下)

特别要记得写 flex-wrap: wrap; 不然超出屏幕部分不会换行

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width:690rpx;

2. 美工设计是按Iphone6, 750px*1334px的尺寸设计。切图的尺寸对应wxss里的rpx, 1rpx=0.5px

3. 容器的图片文字居中

.col3
{
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  width:230rpx;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.col3 image{
  margin-left:auto;
  margin-right:auto;
}

 

小程序WXSS布局

上一篇:小程序用户授权可以获取用户的信息


下一篇:返回一个二维整数数组中最大子数组的和的小程序