微信小程序样式|微信小程序常用样式汇总

微信小程序样式（微信小程序常用样式汇总）
小程序特点：用完即走、低频使用、性能要求低，不支持webview；
以iphone6尺寸（750*1334）为视觉稿进行设计；
iphone6下1px=1rpx=0.5pt iphone6 plux下1px=0.6rpx；
使用rpx，小程序会自动在不同的分辨率下进行转换，而使用px为单位不会；

1.设置全局字体样式app.wxss：
text{font-family:MicroSoft yahei;}2.设置弹性盒子模型：

【微信小程序样式|微信小程序常用样式汇总】

.container{/*弹性模型*/display:flex;/*垂直方向列方向排布*/flex-direction:column;/*居中*/align-items百思特网:center;/*要从整体解决排布的问题是最好的方案*/}3.设置页面全屏样式及背景色：
page{height:100%;background:#b3d4db;}4.全局设置导航条颜色app.json：
"window": {"navigationBarBackgroundColor": "#百思特网405f80"}5.页面设置导航条颜色和标题*.json:
{"navigationBarBackgroundColor": "#405f80","navigationBarTitleText":"文与字"}6.设置字体属性：
.user-name{font-size:32rpx;font-weight:bold;}7.创建圆角矩形边框：
.moto-container{border:1px solid #405f80;width:200rpx;height:80rpx;border-radius:5rpx;text-align:center;}8.外边距设置：
margin-top:20rpx;margin-bottom:40rpx;9.内边距设置：
padding-bottom:20rpx;10.上、下边线设置：
border-bottom:1px solid #ededed;border-top:1px solid #ededed;11.文字间距设置：
letter-spacing:2rpx;12.垂直居中（此元素放置在父元素的中部）：
vertical-align: middle;
13.设置子元素Image样式：
.circle-img image{ width:90rpx; height: 90rpx}14.最底层垂直居中横线样式：
.horizon{ width:660rpx; height: 2rpx; background-color: #e5e5e5; vertical-align: middle; position:relative; top:46rpx; margin: 0 auto; z-index: -99}15.图片居中覆盖:
.audio{ width:102rpx; height:110rpx; pos百思特网ition: absolute; left: 50%; margin-left: -51rpx;//经典水平居中方式 top:180rpx; margin-top: 20rpx; opacity:0.6;//透明度