微信小程序-页面配置

app.json
介绍基本的入口文件
在微信小程序中是通过view元素对组件进行分组的。

快速实现基本布局

<text>元素独占行

text{
  display: block;
}

弹性盒子布局

• 元素从左往右放置
  display:flex
  
• 元素从上往下放置
  flex-direction: column;
  
• 垂直方向上均匀分布
  justify-content: space-around;
  
• 垂直方向上居中显示
  align-items: center;
  
  image.png
  
  弹性盒子布局是一种整体的布局。

适配不同屏幕宽度

响应式长度单位:rpx
元素设置不同的屏幕

设置图片均为屏幕的一半

小程序规定所以屏幕的宽高均为750rpx;

.about-banner{
  width: 375rpx;
  height: 375rpx;
}

在小程序的设计中一般是以iphone6来设计的，因为iphone6的屏幕宽度设置为750px;
px和rpx的换算单位为1:2
比如height:30px;
则：height:60rpx;