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;
